前端基础-文档对象模型 (DOM)
前端基础-文档对象模型 (DOM)
第1章 文档对象模型 (DOM)
1.1 基本概念
DOM是JavaScript操作网页的接口，全称为“文档对象模型”(Document Object Model)。 它的作用是将网页转为一个JavaScript对象，从而可以用脚本进行各种操作(增删改查)。
浏览器会根据DOM模型，将结构化文档(比如HTML和XML)解析成一系列的节点， 再由这些节点组成一个树状结构(DOM Tree)。 所有的节点和最终的树状结构，都有规范的对外接口。
JavaScript是一门编程语言，而DOM是浏览器对HTML文档结构化后的一个模型;
严格地说，DOM不属于JavaScript，但是我们最常用的就是使用JavaScript操作DOM;
1.2 节点的概念
DOM的最小组成单位叫做节点(node)。文档的树形结构(DOM树)，就是由各种不同类型的节点组成。
每个节点都可以看作是文档树的一片叶子。
最顶层的节点就是document节点，它代表了整个文档；是文档的根节点。
每张网页都有自己的document节点，window.document属性就指向这个节点的。
只要浏览器开始载入HTML文档，这个节点对象就存在了，可以直接调用。
每一个HTML标签元素，在DOM树上都会转化成一个Element节点对象;
文档里面最高一层一般是HTML标签，其他HTML标签节点都是它的下级。
除了根节点以外，其他节点对于周围的节点都存在三种关系:
父节点关系(parentNode):直接的那个上级节点
子节点关系(childNodes):直接的下级节点
同级节点关系(sibling):拥有同一个父节点的节点常用dom操作：
查找页面的标签元素
标签增加、修改、删除等操作
标签的属性相关操作
给标签元素绑定事件（设置当什么什么时候，做什么什么事情）
1.3 查找节点
上一节我们知道，整个文档的节点就是document节点，那么想要具体找到某个节点， 我们可以使用document提供的一系列方法：
<div>
<p id="p1">1111111111</p>
<i>2222222222</i>
<p class='p'>1111111111</p>
<i>2222222222</i>
<p class="p">1111111111</p>
<i>2222222222</i>
<div id="p">
<p name="p">3333333333</p>
</div>
</div>getElementsByTagName() 返回所有指定HTML标签的元素，返回值是一个类似数组的HTMLCollection对象；匹配失败，返回[] 参数是想要获取节点的具体节点名称，就是 标签名；
var p = document.getElementsByTagName('p');
//标签节点.style.样式名 = '样式值' 可以给标签节点设置css样式
p[3].style.background = 'red';getElementsByClassName() 返回所有class名字符合指定条件的元素,返回值是一个类似数组的HTMLCollection对象；匹配失败，返回[] 参数为 标签的class属性的值
var p = document.getElementsByClassName('p');
p[1].style.background = 'yellow';getElementsByName() 选择拥有name属性的HTML元素，返回值是一个类似数组的HTMLCollection对象；匹配失败，返回[] 参数为 标签的name属性的值; 注意，使用时，最好选择原生具有name属性的元素；
var p = document.getElementsByName('p');
p[0].style.background = 'yellow';getElementById() 返回匹配指定id属性的元素节点;没有发现匹配的节点，则返回null 参数为 标签的id属性的值,参数大小写敏感;
var p = document.getElementById('p');
p.style.background = 'yellow';querySelector()、querySelectorAll() document.querySelector方法接受一个CSS选择器作为参数，返回匹配该选择器的元素节点； 如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回null；
document.querySelectorAll方法与querySelector用法类似， 区别是返回一个类似数组的HTMLCollection对象，包含所有匹配给定选择器的节点。
var p = document.querySelector('.p');
p.style.background = 'yellow';var p = document.querySelectorAll('.p');
p[1].style.background = 'yellow';多个参数值，使用,（英文逗号）隔开，而querySelector()返回第一个选中的节点；
var p = document.querySelectorAll('i,.p');
for(var i=0;i<p.length;i++){
p[i].style.background = 'yellow';
}这两个方法都支持复杂的CSS选择器。
//选中 id 属性值为p1的元素
// var p = document.querySelectorAll('[id="p1"]');
//选中div元素的class属相值为p的元素
// var p = document.querySelectorAll('div.p');
//选中所有的p标签，但是class值为p的除外
var p = document.querySelectorAll('p:not(.p)');
for(var i=0;i<p.length;i++){
p[i].style.background = 'yellow';
}但是，它们不支持CSS伪元素的选择器（比如:first-line和:first-letter） 和伪类的选择器（比如:link和:visited），即无法选中伪元素和伪类。