DOM的定义
DOM
完整写法:Document Object Model
DOM
定义了表示和修改文档所需的方法。DOM
对象即为宿主对象,由浏览器厂商定义,用来操作html
和xml
功能的一类对象的集合。也有人称DOM
是html
以及xml
的标准编程接口。
查看元素节点
document
代表整个文档
document.getElementById()
元素id在IE8以下浏览器,不区分id大小写,而且也返回匹配name属性的元素。
documentElementsByTagName()
标签名
getElementsByName()
需要注意,只有部分标签name可生效(表单,表单元素,img,iframe)。此方法定义在HTMLDocument.prototype
上,即非html中的document不能使用(`xml document,Element)
getElementsByClassName()
类名,ie8和ie8以下的版本中没有,可以过个class一起
querySelector()
css选择器,在ie7和ie7以下的版本中没有
querySelectorAll()
css选择器,在ie7和ie7以下的版本中没有
遍历节点树
parentNode
父节点(最顶端的parentNode为document
)
childNodes
子节点
firstChild
第一个子节点
lastChild
最后一个子节点
nextSibling
后一个兄弟节点
previousSibling
前一个兄弟节点
基于元素节点树的遍历
parentElement
返回当前元素的父元素节点(IE9以下不兼容)
children
只返回当前元素的元素子节点
node.childElementCount === node.children.length
当前元素节点的子元素节点个数(IE9以下不兼容)
firstElementChild
返回的是第一个元素节点(IE9以下不兼容)
lastElementChild
返回的是最后一个元素节点(IE9以下不兼容)
nextElementSibling/previousElementSibling
返回后一个/前一个兄弟元素节点(IE9以下不兼容)
节点的四个属性
nodeType
该节点的类型,只读
nodeName
元素的标签名,以大写形式表示,只读
nodeValue
Text节点或Comment节点的文本内容,可读写
attributes
Element节点的属性集合
节点的一个方法 Node.hasChildNodes()
节点类型
获取节点类型 nodeType
元素节点 —— 1
属性节点 —— 2
文本节点 —— 3
注释节点 —— 8
document —— 9
DocumentFragment —— 11
DOM结构树
getElementById()
方法定义在Document.prototype上,即Element节点上不能使用。getElementsByName()
方法定义在HTMLDocument.prototype上,即非html中的document不能使用(xml document,Element)documentElementsByTagName()
方法定义在Document.prototype和Element.prototype上HTMLDocument.prototype
定义了一些常用的属性,body,head分辨指代HTML文档中的<body><head>标签Document.prototype
上定义了documentElement属性,指代文档的根元素,在HTML文档中,他总是指代<html>元素getElementsByClassName
,querySelectorAll
,querySelector
在Document.prototype和Element.prototype类中均有定义