document对象、获取元素、节点、遍历树

document对象

ECMScript包含ECMA、DOM、BOM,其中Javascript引擎认为HTML是一个文档对象，而document对象就算文档对象，它提供了一些属性和方法对HTML文档进行操作，处理文档内部的一些事件

元素的获取方式

因为document对象通过了属性和方法操作HTML文档，所有可以通过document对象获取目标元素
document。getElementById()
根据元素的id获取目标元素
IE6以上都支持
document.getElementsByTagName()
根据标签名获取元素对象的集合，得到的是一个类数组
兼容性好
document.getElementsByName()
根据标签的name属性获取元素集合
IE6以上都支持
document.querySelector()
根据css选择器或id获取单个元素, 只能选择一个元素，不能选择组，有重复的只能选到第一个
querySelector(‘.+类名’|‘#+ID名’)
IE7以下不支持
document.querySelectorAll()
获取到元素的集合，但是不常用

遍历节点树

节点
节点不是元素，节点是包含元素的，元素是节点中的一部分，节点中的元素节点也成为DOM元素，也就是通过document对象上的方法获取到的元素对象
元素节点树
由DOM元素组成的树形结构叫元素节点树（只由元素节点组成）

节点种类、遍历节点树

节点种类
1、元素节点 =1
2、属性节点 =2
3、文本节点 text =3
4、注释节点 comment =8
5、document节点 =9
6、DocumentFragment document片段 =11
遍历节点树

1. Node.parentNode：获取父节点。其中，一个子元素只有一个父节点，一个父节点不一定只有一个子元素。HTML父级节点是#document文档对象，#document文档对象的父级节点是null。

2. Node.childNodes：获取指定节点的所有子节点集合，即包括元素节点，也存在其它节点。该元素是NodeList类数组对象，是及时更新的集合，NodeList集合属于只读属性。

3. Node.firstChild：只读，返回节点树节点中的第一个子节点。

4. Node.lastChild：只读，返回节点树节点中的最后一个子节点。

5. Node.nextSibling：只读，返回当前节点的下一个兄弟节点。

6. Node.previousSibling：只读，返回当前节点的前一个兄弟节点

遍历元素节点树

节点包含元素节点和其他元素，如何之间操作元素节点不受其他节点影响，可以通过直接获取元素节点

1. Node.parentElement：获取当前节点的父元素。因为#document是节点，不是元素，所以HTML的parentElement是null，不是#document文档对象
   a. 兼容性：IE9及以下不支持。

2. Element.children：只读，获取当前节点的所有子元素。
   a. 兼容性：IE7及以下不支持。

3. Element.childElementCount === children.length：只读，返回子元素集合的长度。
   a. 兼容性：IE9及以下不支持。

4. Element.firstElementChild：只读，获取元素的第一个子元素节点。
   a. 兼容性：IE9及以下不支持。

5. Element.lastElementChild：只读，获取元素的最后一个子元素节点。
   a. 兼容性：IE9及以下不支持。

6. Element.nextElementSibling：只读，获取元素节点的下一个兄弟元素节点。
   a. 兼容性：IE9及以下不支持。

7. Element.previousElementSibling：只读，获取元素节点的上一个兄弟元素节点。
   a. 兼容性，IE9及以下不支持