HTML DOM 节点关系

关键字	简介	示例代码
	节点关系图	示例代码
parentNode	父节点关系	示例代码
previousSibling nextSibling	同胞节点关系	示例代码
childNodes	子节点关系	示例代码
childNodes children	childNodes和children的区别	示例代码

示例 1 : 节点关系图    
示例 2 : 父节点关系    
示例 3 : 同胞节点关系    
示例 4 : 子节点关系    
示例 5 : childNodes和children的区别    

 示例 1 : 

节点关系图

 提问

假设html代码如实例中，那么各个元素节点的关系如下:
d1 d2 d3 的parentNode是parentDiv
parentDiv的firstNode是 d1
parentDiv的lastNode是d3
d2的previousSibling是d1
d2的nextSibling是d3
parentDiv的children是 d1 d2 d3

运行效果

代码比较

1 2 3 4 5

<div id="parentDiv">  <div id="d1">第一个div</div>  <div id="d2">第二个div</div>  <div id="d3">第三个div</div> </div>

试一下

 示例 2 : 

父节点关系

 提问

通过parentNode获取父节点。 
本例中从id=d1的div开始递归获取其父节点，分别获取如下父节点 
DIV[id=parentDiv] -> body->html->document

运行效果

代码比较

代码超过 20行，点击查看 

试一下

 示例 3 : 

同胞节点关系

 提问

分别通过 previousSibling和nextSibling属性获取前一个，以及后一个同胞节点。
在本例中，首先获取d2元素节点
通过previousSibling获取前一个节点d1.
注意 d1和d2标签是紧挨着的，所以d2前一个节点时d1。
通过nextSibling 获取后一个节点#text.
注意 d2和d3不是紧挨着 标签之间有任何字符、空白、换行都会产生文本元素。 所以获取到的节点是#text.

运行效果

代码比较

代码超过 20行，点击查看 

试一下

 示例 4 : 

子节点关系

 提问

子节点关系有: 
firstChild 第一个子节点 
lastChild 最后一个子节点 
childNodes 所有子节点 
注:firstChild 如果父节点的开始标签和第一个元素的开始标签之间有文本、空格、换行，那么firstChild第一个子节点将会是文本节点，不会是第一个元素节点 
注:lastChild 和firstChild同理。 在本例中故意让第3个元素的结束标签与div的结束标签紧挨着，所以最后一个子节点就是第三个标签 
注: 子元素个数一共是6个。 因为parentDiv的子节点是 文本节点接着一个元素节点，重复3次。 所以一共是6个。

运行效果

代码比较

代码超过 20行，点击查看 

试一下

 示例 5 : 

childNodes和children的区别

 提问

childNodes和children都可以获取一个元素节点的子节点。 
childNodes 会包含文本节点 
children 会排除文本节点 

运行效果

代码比较

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<div id="parentDiv">  <div id="d1">第一个div</div>  <div id="d2">第二个div</div>  <div id="d3">第三个div</div></div>   <button onclick="showNumber1()">通过childNodes获取子节点总数</button>   <button onclick="showNumber2()">通过children()获取子节点总数</button>   <script>   function showNumber1(){   alert(document.getElementById("parentDiv").childNodes.length); }   function showNumber2(){   alert(document.getElementById("parentDiv").children.length); }   </script>

试一下