DOM-2 【document对象-获取元素-节点-遍历树】

一、document对象

document是dom树的最顶端

JS把HTML文档解析成DOM树了以后，它就是一个文档，这个文档的描述就是document

二、获取元素

（1）获取元素的方法

1. document.getElementById()
   在IE8及以下是不分大小写的，而且name值也能匹配上

2. document.getElementsByClassName()
   IE8及以下是用不了的

3. document.getElementsByTagName()
   都兼容

4. document.getElementsByName()
   用的非常少

5. document.querySelector() / document.querySelecotAll()
   兼容性好 性能不好 不实时

（2）小结

1. id(钩子)： 能不用就不用，模块化开发id只用于后端注入数据
2. 除去getElementbyId的剩下的方法都是获取一组的，通过下标([0])可以访问

三、遍历节点树

节点不等于元素，节点是包含元素的（节点 => 元素节点 = DOM元素）

（1）parentNode

document的父节点是null

（2）childNodes

换行符也是一个文本节点

（4）firstChild/lastChild

（5）nextSibling/previousSibling

四、遍历元素节点树

（1）parentElement（IE9及以下不支持）

html就是元素节点树的最顶点，它有父节点，但是没有父元素

（2）children（IE7及以下不支持）

选择子元素

（3）childElementCount & children.length（IE9及以下不支持）

子元素长度

childElementCount = children.length

（4）firstElementChild & lastElementChild（IE9及以下不支持）

（5）nextElementSibling & previousElementSibling（IE9及以下不支持）

（6）小结

除了parentNode、childNodes（重新封装），其它的属性公司都不用