Javascript(笔记23) - DOM基本操作 - 遍历节点树
DOM的节点可以形成一个类型树的结构
遍历节点树
节点的类型
上图看的是HTML的结构，主要指的是元素节点，但在DOM结构里，节点可不止元素节点：
元素节点 ---1
属性节点 ---2
文本节点 ---3
注释节点 ---8
document ---9
DocumentFragment --- 11
咱这里主要讨论 元素节点和文本节点；
parentNode
父节点 （最顶端的 parentNoe 为 #document）
<div>
<strong></strong>
<span></span>
<em></em>
</div>
上面个这个结构，我们取出 strong ;
var strong = document.getElementsByTagName("strong")[0];
使用 parentNode 来找到它的父节点：
DOM元素都有这个属性，所以可以一直 parentNode 找到最上层的节点：
可以看到， strong 的父节点是 div ，div 的父节点是 html，html的父节点是 document。
那 document 上面还有没有父节点？
返回 null ，就没有了。 document 就到头了。
一个元素只有一个父节点，那么一个元素有几个子节点呢？那就说不定了。
childNodes
子节点们，仅直系的子节点，孙子辈的可不能算；
来看个HTML结构，相当于<div>标签，孙子辈的 <span>标签可不能算；
<div>
<strong>
<span>123</span>
</strong>
<span></span>
<em></em>
</div>
JS里取一个这个DIV对象；
var div = document.getElementsByTagName("div")[0];
看一下 div 的 childNodes 子节点们：
不应该是3个么，怎么变7个，就是算上 <span>也不够了。
注意，每个标签之间的空格部分 “text” 也算做子节点，他们被称为 文本子节点。
上面提到的节点类型中，就包括这种文本子节点，虽然看不到文本，只是空格也算文本。
如果把结构都写在一行里面：
<div><strong><span>123</span></strong><span></span><em></em></div>
这样就把标签之间的文本子节点去掉了，但这样的结构不够友好，一般也不这么样用；
把HTML的结构改一下：
<div>
<!-- this is commet -->
<strong></strong>
<span></span>
</div>
再问 div 里的子节点：
var div = document.getElementsByTagName("div")[0];
看下控制台：
还是7个子节点：这次不一样的是多了一个 comment （注释节点），虽然不执行，但也算是节点；
HTML结构再改一下：
<div>
这里有一段文本
<!-- this is commet -->
<strong></strong>
<span></span>
</div>
再问 div 有几个子节点：不用说，还是7个了。 因为第一个子节点是文本节点，之前只有空格，现在加上了文本而已，都算是1个文本节点。
firstChild
第一个子节点
<div>
<!-- this is commet -->
<strong></strong>
<span></span>
</div>
这个就字面意思，获取第一个子节点：
var div = document.getElementsByTagName("div")[0];
lastChild
最后一个子节点
跟 firshChild 类似，获取最后一个子节点：
注意：虽然 firstChild 和 lastChild 都是 text ，上面是第一个子节点，下面是最后一个字节点。
nextSibling 和 previousSibling 这两个是取兄弟节点的，也可以一起讲了。
nextSibling
后一个兄弟节点
<div>
<!-- this is commet -->
<strong></strong>
<span></span>
</div>
这次取 strong 也举例：
var strong = document.getElementsByTagName("strong")[0];
看控制台输出：
如果继续往下 nextSibling 呢？
span 元素节点后面还是个 text 节点，text节点后面就没有了，返回 null.
previousSibling
前一个兄弟节点
还用上面的 HTML结构，这次用 previousSibling:
var strong = document.getElementsByTagName("strong")[0];
向上取兄弟节点：
向上取兄弟节点，可以取到 comment 节点；
如果向上后再向下取呢？或者向下后再向上取呢？
那很显然，就是 strong 它自己了。
