JavaScript 获取子节点、父节点、兄弟节点方法总结

案例数据：

<div id="wrap">
  <div id="city">
    城市
    <div id="sh" class="east">上海</div>
    <div id="gz" class="south">广州</div>
    <div id="xa" class="west">西安</div>
    <div id="bj" class="north">北京</div>
  </div>
</div>

1. 获取子节点的方式

1.1 通过获取dom方式直接获取子节点

var target = document.getElementById('city').getElementsByTagName('div');

getElementsByTagName 返回的是一个数组,在访问的时候要按数组的形式访问。

1.2 通过 childNodes 获取子节点

var target = document.getElementById('city').childNodes;

使用 childNodes 获取子节点的时候，childNodes 返回的是子节点的集合，是一个数组的格式。
它会把换行和空格也当成是节点信息。
为了不显示不必须的换行的空格，需通过正则表达式过滤掉不必要的信息。

  // 去掉换行的空格
  for(var i = 0; i < target.length; i++){
    if(target[i].nodeName == "#text" && !/\s/.test(target.nodeValue)){
      document.getElementById("city").removeChild(target[i]);
    }
  }
  // 打印测试
  for(var i = 0; i < target.length; i++){
    console.log(target[i]);
  }
  // 补充 document.getElementById("city").childElementCount; 可以直接获取长度 同length

1.3 通过 children 来获取子节点

var target = document.getElementById('city').children;

利用 children 来获取子元素是最方便的，它会返回出一个数组。对其获取子元素的访问只需按数组的访问形式即可。

1.4 firstChild 获取第一个子节点

var getFirstChild = document.getElementById("city").firstChild;

firstChild 来获取第一个子元素，但是在有些情况下我们打印的时候会显示 undefined，这是什么情况呢？
其实 firstChild 和 childNodes 是一样的，在浏览器解析的时候会把换行和空格一起解析，获取的是第一个子节点，只是这个子节点是一个换行或者是一个空格而已，因此不要忘记和 childNodes 一样处理。

1.5 firstElementChild 获取第一个子节点

var target = document.getElementById('city').firstElementChild;

使用 firstElementChild 来获取第一个子元素的时候，这就没有 firstChild 的那种情况（匹配换行和空格信息），会获取到父元素第一个子元素的节点，这样就能直接显示出来文本信息了。

1.6 获取最后一个子节点

var target1 = document.getElementById('city').lastChild;
var target2 = document.getElementById('city').lastElementChild;
console.log(target1,'-----',target2)

lastChild 获取最后一个子节点的方式其实和 firstChild 是类似的，同样的 lastElementChild 和 firstElementChild 也是一样的。

2. 获取父节点的方式

2.1 parentNode 获取父节点

var target = document.getElementById('sh').parentNode;

获取的是当前元素的直接父元素，parentNode 是w3c的标准。

2.2 parentElement 获取父节点

var target = document.getElementById('gz').parentElement;

parentElement 和 parentNode 一样，只是 parentElement 是 ie 的标准。

2.3 offsetParent 获取父节点

var target = document.getElementById('gz').offsetParent;

offset 我们知道是偏移量其实这个是与位置有关的上下级，直接能够获取到所有父亲节点，这个对应的值是 body 下的所有节点信息。

3. 获取兄弟节点的方式

3.1 先获取父节点，再获取子节点，最终获取兄弟节点

var target = document.getElementById('sh').parentNode.children[1];

3.2 获取上一个兄弟节点

var target1 = document.getElementById('gz').previousElementSibling;
var target2 = document.getElementById('gz').previousSibling;
console.log(target1,'---',target2)

在获取前一个兄弟节点的时候可以使用 previousSibling 和 previousElementSibling。
区别：previousSibling 会匹配字符包括换行和空格，而不是节点，previousElementSibling 则直接匹配节点。

3.3 获取下一个兄弟节点

var target1 = document.getElementById('gz').nextElementSibling;
var target2 = document.getElementById('gz').nextSibling;

在获取前一个兄弟节点的时候可以使用 nextSibling 和 nextElementSibling。
区别：nextSibling 会匹配字符包括换行和空格，而不是节点，nextElementSibling 则直接匹配节点。

文章由半码博客整理，本文链接：https://www.bmabk.com/index.php/post/141405.html

JavaScript 获取子节点、父节点、兄弟节点方法总结

1. 获取子节点的方式

2. 获取父节点的方式

3. 获取兄弟节点的方式

相关推荐

发表回复