怎么查找DOM里的节点关系

DOM节点是有层级关系的。元素节点有相关的属性，可以让我们通过这些属性来找到相应层级关系的节点。

在介绍具体的层级关系属性前，我们先来介绍检查和获取子节点的几个方法和属性。

hasChildNodes()方法：返回一个元素是否具有任何子元素。返回值为布尔值。

需要注意的地方是：元素内有空格换行，返回值为true，空格被认为是文本节点。比如：

<div id="test">
  <p></p>
</div>

<script>
document.getElementById("test").hasChildNodes();  //返回true
</script>

childNodes属性：返回元素的一个子节点的数组。比如：

<div id="test">
  <p id="p1">
    <a>测试1</a>
    测试
  </p>
  <a>测试2</a>
</div>

<button id="demo" onclick="showNodeName()">显示节点名称</button>
<div id="namebox"></div>
<script>

function showNodeName(){
  var list = document.getElementById("test").childNodes;
  var txt="";

  for (i=0; i<list.length; i++){
    txt=txt + list[i].nodeName + "<br>";
  };

  var x=document.getElementById("namebox");  
  x.innerHTML=txt;
}
</script>

结果：

#text
P
#text
A
#text

children属性：返回元素的子元素的集合。

children 属性与 childNodes 属性的差别：

childNodes 属性返回所有的节点，包括文本节点、注释节点；
children 属性只返回元素节点；

上面的例子，结果为：

P
A

元素节点层级关系的属性有：

parentNode（父节点）
子节点：
firstChild
lastChild

兄弟节点：
previousSibling
previousElementSibling
nextSibling
nextElementSibling

我们之前在介绍删除元素的时候，介绍了parentNode属性,它是返回某节点的父节点。比如：

<div>
  <p></p>
</div>

p元素的父节点是div元素。

firstChild属性：返回元素的第一个子节点。比如：

<div>
  <p></p>
  <a></a>
</div>

div的第一个子节点是p元素。

lastChild属性：返回元素的最后一个子节点。比如：

<div>
  <p></p>
  <a></a>
</div>

div的最后一个子节点是a元素。

previousSibling属性：返回某节点之前紧跟的节点（处于同一树层级）。比如：

<div>
  <p id="p1">测试1</p>
  <p id="p2">测试2</p>
</div>

<div id="namebox" style="color:red;"></div>

<script>
  var preNode = document.getElementById("p2").previousSibling;
  var x=document.getElementById("namebox");  
  x.innerHTML=preNode.nodeName; //#text
</script>

previousElementSibling属性：返回指定元素的前一个兄弟元素（相同节点树层中的前一个元素节点）。

上面例子，结果：P

previousSibling属性与previousElementSibling属性的区别：

previousSibling 属性返回元素节点之前的兄弟节点（包括文本节点、注释节点）；
previousElementSibling 属性只返回元素节点之前的兄弟元素节点（不包括文本节点、注释节点）；

nextSibling属性：返回某节点紧跟的一个节点。

<div>
  <p id="p1">测试1</p>
  <p id="p2">测试2</p>
</div>

<div id="namebox"></div>

<script>
  var preNode = document.getElementById("p1").nextSibling;
  var x=document.getElementById("namebox");  
  x.innerHTML=preNode.nodeName; //#text
</script>

nextElementSibling属性：返回指定元素之后的下一个兄弟元素（相同节点树层中的下一个元素节点）。

<div>
  <p id="p1">测试1</p>
  <p id="p2">测试2</p>
</div>

<div id="namebox" style="color:red;"></div>

<script>
  var preNode = document.getElementById("p1").nextElementSibling;
  var x=document.getElementById("namebox");  
  x.innerHTML=preNode.nodeName; //P
</script>

nextSibling属性与nextElementSibling属性的区别：

nextSibling属性返回元素节点之后的兄弟节点（包括文本节点、注释节点）；
nextElementSibling属性只返回元素节点之后的兄弟元素节点（不包括文本节点、注释节点）；

ownerDocument属性：返回元素的根元素（文档对象）。比如：

<div id="test"></div>
<script>
  document.getElementById("test").ownerDocument.nodeType;//返回9
</script>

Document对象是HTML文档的根节点。

介绍两个特殊的属性，可以访问全部文档：

document.documentElement：全部文档，html元素内的节点。
document.body：文档的主体，body元素内的节点。
nodeType属性：返回元素的节点类型

节点类型总共有12种，我们常用的节点类型返回值。如下：

返回1：元素节点
返回2：属性节点
返回3：文本节点
返回8：注释节点
返回9：根节点

比如：

<div id="test">
  <p id="p1">测试</p>
  <a></a>
</div>

<script>
  var d = document.getElementById("test").nodeType; //返回1 
  var p = document.getElementById("p1").firstChild.nodeType; //返回3
</script>

nodeName属性：依据节点的类型返回其名称。比如：

元素节点，返回标签名（大写）
属性节点，返回属性名（大写）
文本节点，返回#text
注释节点，返回#comment
根节点，返回#document

比如：

<div id="test">
  <p id="p1">测试</p>
  <a></a>
</div>

<script>
var d = document.getElementById("test").nodeName; //返回DIV
var p = document.getElementById("p1").firstChild.nodeName; //返回#text
</script>

nodeValue属性：根据节点的类型设置或返回节点的值。

比如：
元素节点，返回null
属性节点，返回属性值
文本节点，返回节点内容
注释节点，返回注释文本

代码示例：

<div id="test">
  <p id="p1">测试</p>
  <a></a>
</div>

<script>
var d = document.getElementById("test").nodeValue; //返回null
var p = document.getElementById("p1").firstChild.nodeValue; //返回测试

document.getElementById("p1").firstChild.nodeValue = "测试1";
</script>

对于文本内容，我们也可以用textContent属性，它是用来设置或者返回指定节点的文本内容。

注意：它会返回指定节点里所有的内容，包括所有子节点的内容。比如：

<div id="test">
  <p id="p1">
    <a>测试1</a>
    测试
  </p>
  <a>测试2</a>
</div>

<script>
var d = document.getElementById("test").textContent; //返回测试1测试 测试2
</script>

如果设置textContent属性，设置的文本内容会覆盖节点里所有的内容。比如：

<div id="test">
  <p id="p1">
    <a>测试1</a>
    测试
  </p>
  <a>测试2</a>
</div>

<script>
document.getElementById("test").textContent = '刘小妞的栖息地';
</script>

新的DOM结构如下：

<div id="test">
刘小妞的栖息地
</div>

其他更多关于前端知识的文章，欢迎微信搜索公众号：“刘小妞的栖息地或者识别下图的二维码查看，感谢大家的支持。