一、document对象
document是dom树的最顶端
JS把HTML文档解析成DOM树了以后,它就是一个文档,这个文档的描述就是document
二、获取元素
(1)获取元素的方法
-
document.getElementById()
在IE8及以下是不分大小写的,而且name值也能匹配上 -
document.getElementsByClassName()
IE8及以下是用不了的 -
document.getElementsByTagName()
都兼容 -
document.getElementsByName()
用的非常少 -
document.querySelector() / document.querySelecotAll()
兼容性好 性能不好 不实时
(2)小结
- id(钩子): 能不用就不用,模块化开发id只用于后端注入数据
- 除去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(重新封装),其它的属性公司都不用