JavaScript - DOM - Document对象
如何在HTML使用JavaScript
<script>元素用于在HTML中引用或嵌套JavaScript脚本代码，该元素默认被定义在<head>元素中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<script> </script>元素
作用 - 引入脚本语言
属性
src - 指定js文件路径
type=''text/javascript -（新）表示当前使用的是js语言
language=''javascript - (旧) 表示当前使用的是js语言
-->
<script src="js.js" type="text/javascript" language="JavaScript">
//浏览器加载完毕在执行指定代码
window.onload = function () {
//js编码写在这里
}
</script>
</head>
<body>
<button id="btn">按钮</button>
<!--考虑到代码执行的顺序，js代码写到HTML后面
也可以使用windon.onload 解决顺序问题
js语言写在HTML页面，没有实现有效分离-->
<script>console.log('这是一段js代码')</script>
</body>
</html>DOM
DOM是什么
- DOM是Document Object Model的缩写，译为文档对象模型
- DOM是一个独立于任何语言和平台的接口，允许任何语言或者脚本动态的访问和更新HTML文档的内容、- 结构和样式。该HTML页面会进一步处理，并且该处理的结果可以被合并到呈现的HTML页面中。
- DOM被设计用于解析HTML页面文档，方便JavaScript语言通过DOM访问和操作HTML页面中的内容。
Document对象
Document对象是什么
Document对象时DOM中标准规范中比较重要的对象之一，该对象提供了访问和更新HTML页面内容的属性和方法。Document对象提供的属性和方法，可以实现定位HTML页面中的元素，或者创建新的元素等功能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
/* documeng对象
* DOM预定义 - 可以直接使用
* 得到的是HTML页面的源代码，该对象代表HTML页面*/
console.log(document);
/*确认document是一个对象*/
console.log(document instanceof Object);//true
/*document对象的属性和方法被定义在原型上*/
console.log(Document.prototype);
//不需要再创建
var document = new Document();
console.log(document);
</script>
</body>
</html>document对象的继承链
Document对象是继承于Node对象的，Node对象也是DOM标准规范中非常重要而的对象之一，Node对象又是继承于EventTarge对象。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//document对象时继承与Node的
console.log(document.prototype instanceof Node);//true
//Node对象是继承于EventTarget
console.log(Node.prototype instanceof EventTarget);//true
//document继承于EventTarget
console.log(document.prototype instanceof EventTarget);//true
</script>
</body>
</html>定位页面元素
Document对象提供了属性和方法实现页面元素定位功能，这也是DOM规范中Document对象的主要应用之一。
Document对象提供实现页面元素定位的方法具有以下几种：
- getElementById()方法：通过页面元素的id属性值定位元素
- getElementsByName()方法：通过页面的name属性定位元素
- getElementsByTagName()方法：通过页面元素的元素名定位元素
- getElementsByClassName()方法：通过页面元素的class属性值定位元素
- querySelector()方法：通过CSS选择器定位第一个匹配的元素
- querySelectorAll()方法：通过CSS选择器定位所有匹配的元素
getElementById()方法
由于id属性是唯一的，所以通过这种方法定位的HTML元素也是唯一的
<body>
<button id="btn">按钮</button>
<script>
//使用getElementById()方法定位元素
var button = document.getElementById('btn');
//DOM无论是使用的还是得到的都应该是对象
console.log(button instanceof Object);//true
/* DOM提供了一系列对象 - 对应HTML的每一个元素
* <button>具有 HTMLButtonElementd 对象
* 元素的对象名格式 HTML元素名Element
* <div>具有 HTMLDivElement对象*/
</script>
</body>getElementsByName()方法
<body>
<button name="btn">按钮</button>
<button name="btn">按钮</button>
<button name="btn">按钮</button>
<script>
//通过getElementByName()方法定位元素
//name属性不唯一，得到的结果可能是多个，也可能是一个
var buttonElements = document.getElementsByName('btn');
/* NodeList集合 - 类数组对象
* 通过索引值得到每一个元素*/
console.log(buttonElements[0]);
console.log(buttonElements instanceof NodeList);//true
</script>
</body>getElementsByGayName()方法
<body>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<script>
//通过getElementsByTagNamr()方法定位元素
var buttonElements = document.getElementsByTagName('button');
//HTMLCollection集合 - 类数组对象
console.log(buttonElements[0])
console.log(buttonElements instanceof HTMLCollection);//true
</script>
</body>getElementsByClassName()方法
<body>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<script>
var buttonElements = document.getElementsByClassName('btns');
//HTMLCollection集合 - 类数组对象
console.log(buttonElements[1]);
</script>
</body>CSS选择器定位元素
<body>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<script>
//该方法返回的是第一个匹配的元素
//多个选择器之间用逗号分隔
var buttonElement1 = document.querySelector('.btns');
console.log(buttonElement1);
//该方法返回的是所有匹配元素的集合 - NodeList集合
//多个选择器之间用逗号分隔
var buttonElement2 = document.querySelectorAll('.btns');
console.log(buttonElement2);
</script>
</body>节点集合NodeList
NodeList是一组元素节点的集合，每个节点具有索引值（从0开始，类似于数组），分为动态和静态两种
- 动态NodeList：如果文档中的节点树发生变化，则已存在的NodeList对象也发生变变化
getElementsByByName
getElementsByTagName
getElementsByClassName
- 静态NodeList：文档对象模型的任何改变都不会影响集合的内容
<body>
<button class="btns" id="btn"></button>
<button class="btns"></button>
<button class="btns"></button>
<button class="btns"></button>
<script>
/* //动态集合
var buttonElents = document.getElementsByClassName('btns');
//集合的长度
console.log(buttonElents.length);//4
//删除集合中一个元素
var btn = document.getElementById('btn');//定位一个元素
document.body.removeChild(btn);//删除定位的元素
console.log(buttonElents.length);//3*/
//静态集合
var btnElement = document.querySelectorAll('.btns');
//结合的长度
console.log(btnElement.length);//4
//删除集合中的一个元素
var btn = document.getElementById('btn');//定位一个元素
document.body.removeChild(btn);//删除定位的元素
console.log(btnElement.length);//4*/
</script>
</body>定位页面的元素属性
Document对象提供了一些属性，定位HTML页面的比较特殊的元素
<body>
<button class="btns" id="btn">按钮</button>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<script>
console.log(document.documentElement);// <html>
console.log(document.head);// <head>
console.log(document.body);// <body>
console.log(document.images);// <image>
//循环遍历图片元素
var images = document.images;
for (var i=0; i<images.length; i++) {
var img = images[i];
console.log(img.src);
}
</script>
</body>创建也变元素
创建元素节点
Document对象提供了createElement()方法创建元素节点
<body>
<script>
// 1.创建<button></button>元素
var btn = document.createElement('button');
// 2.获取<body>元素
var body = document.body;
// 3.向<body>元素添加子节点
body.appendChild(btn);
</script>
</body>创建文本节点
Document对象提供了createTextNode()方法创建文本节点
<body>
<script>
// 1.创建<button></button>元素节点
var btn = document.createElement('button');
// 2.创建文本节点
var textNode = document.createTextNode('按钮');
// 3.向<button>元素添加子节点
btn.appendChild(textNode);
// 4.获取<body>元素
var body = document.body;
// 5.向<body>元素添加子节点
body.appendChild(btn);
</script>
</body>创建属性节点
Document对象提供了createAtrribute()方法创建属性节点
<body>
<script>
// 1.创建<button></button>元素节点
var btn = document.createElement('button');
// 2.创建文本节点
var textNode = document.createTextNode('按钮');
// 3.向<button>元素添加子节点
btn.appendChild(textNode);
// 4.创建属性节点
var attrNode = document.createAttribute('id');
// 5.为属性节点设置值
attrNode.nodeValue = 'btn';
// 6.为<button>元素设置属性节点
btn.setAttributeNode(attrNode);
// 7.获取<body>元素
var body = document.body;
// 8.向<body>元素添加子节点
body.appendChild(btn);
</script>
</body> 相关推荐
huaoa 2020-09-14
爱读书的旅行者 2020-07-07
liaoxuewu 2020-05-19
luvhl 2020-08-17
liaoxuewu 2020-07-08
liaoxuewu 2020-06-26
北京老苏 2020-06-25
Lophole 2020-06-14
SIMONDOMAIN 2020-06-14
luvhl 2020-06-13
SIMONDOMAIN 2020-05-31
hyMiss 2020-05-19
书虫媛 2020-05-15
liaoxuewu 2020-05-11
liaoxuewu 2020-05-10
小仙儿 2020-05-09
hyMiss 2020-05-01