节点类型
我们页面里面的节点类型很多,比如元素节点、文本节点、注释节点、属性节点等等。
我们可以通过nodeType属性来查看这个节点的类型是什么。而nodeType返回的是一些数字,下面介绍几个基础的类型和数字的对应关系:
元素节点——1
属性节点——2
文本节点——3
注释节点——8
document——9
DocumentFragment——11
节点的其他属性
• nodeName
这个属性可以返回元素的标签名,以大写的形式表示,只读,不允许写入。
有几个特殊的节点返回的也不太一样:
文本节点–> #text
注释节点–> #comment
document节点–>#document
• nodeValue
Text节点或者Comment节点的文本内容,可以读写
• attributes
把元素的行间属性都读取出来,放到一个对象里面返回,对象里面的每一个属性都是一个节点,这个节点就是我们前面提到的属性节点。
注意:对象里面的属性叫做property,而元素里面的属性叫attributes,实际应该叫特性。
节点还有一个方法
hasChildNodes()可以检测是否有子节点
遍历节点树
• parentNode 查找父节点
<div>
<p><strong></strong></p>
</div>
这里strong的父节点就是p,p的父节点是div,div的父节点是body,body的父节点是html,html的父节点是document,document的父节点是null,在后面就没有了。
• childNodes 子节点们
div.childNodes 没有说明类型,那么就是说这个方法是把所有的子节点都返回。
<div>
<p><strong></strong></p>
</div>
还是这个例子,我们div里面的childNodes其实有3个,第一个是前面的空格——文本节点,第二个是中间的p标签——元素节点,第三个是最后的空格——文本节点。
• firstChild 第一个子节点
• lastChild 最后一个子节点
• nextSibling 下一个兄弟节点
• previousSibling 上一个兄弟节点
以上这些方法的兼容性都很好,所有的浏览器都支持,但是下面这些就不行了。
基于元素节点树的遍历
• parentElement 返回当前元素的父元素节点
在这个方法上面,html上面的父元素节点就不是document而是null了。
但是ie不支持这个方法。
• children 所有子元素节点
这个方法所有的浏览器都兼容。
• childElementCount
node.children.length === node.childElementCount
这个属性就是子元素节点的数量,不过我更常用前面的那个。
• nextElementSibling
• previousElementSibling
这两个方法分别是找上一个和下一个兄弟元素节点,但是ie都不兼容。
DOM结构树
这个图表中说明了每一个对象的父级。
浏览器除了可以处理html页面外,还可以处理xml和xhtml等页面。
我们发现HTMLDocument继承自HTMLDocument.prototype,我们在原型上定义一个属性来测试一下。
HTMLDocument.prototype.abc = 123;
document.abc; // 123
document.getElementById(‘demo’).abc; // 报错
由此可见,HTMLDocument确实继承HTMLDocument对象的属性,但是相对的Element上面并没有这个方法。
这里的Node上面也还是有父级的,我们可以通过Node.prototype来查看,这里就不举例了。
下面是一些DOM结构树的总结:
1.getId方法定义在Document.prototype上,即Element节点上不能使用。
2.getElementByName方法定义在HTMLDocument.prototype上,非html中的document不能使用(xml document、Element);
3.getElementsByTagName方法定义在Document.prototype和Element.prototype上,也就是document和元素都可以用这个方法。
4.HTMLDocument.prototype上定义了一些常用的属性,body、head分别代指HTML文档中的标签。
5.Document.prototype上定义了documentElement属性,指代文档的根元素,在html文档中,它总代指元素。
6.getElementByClassName、querySelectorAll、querySelector在Document、Element类中均有定义。