DOM节点类型
节点类型
属性节点——2
文本节点——3
注释节点——8
document——9
DocumentFragment——11
遍历节点树
• 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文档中的<body><head>标签。
5.Document.prototype上定义了documentElement属性，指代文档的根元素，在html文档中，它总代指<html>元素。
6.getElementByClassName、querySelectorAll、querySelector在Document、Element类中均有定义。
今天的DOM知识就到这里结束了哟~
