JS获取子、父、兄节点方法小结

在JavaScript中，我们经常需要获取某个元素的子元素、父元素或者兄弟元素来执行一些特定的操作。下面我们来总结一下JS获取子、父、兄节点的常用方法。

一、获取子节点

使用childNodes属性可以获取当前元素的所有子节点，包括文本节点、注释节点等。但是这个属性返回的是一个NodeList对象，如果想要获取指定位置的子元素，我们需要使用数组下标进行获取。

示例：

<div id="parent">
  <p>这是一个段落</p>
  <p>这也是一个段落</p>
  <ul>
    <li>列表项1</li>
    <li>列表项2</li>
  </ul>
</div>

<script>
var parent = document.getElementById('parent');
var childNodes = parent.childNodes;
console.log(childNodes[1]); // 输出的是第1个子元素节点<p>这是一个段落</p>
console.log(childNodes[3]); // 输出的是第3个子元素节点<ul>...</ul>
</script>

二、获取父节点

使用parentNode属性可以获取当前元素的父节点。如果要一直往上查找父节点，一直到根节点（HTML标签），那么就可以使用一个循环来实现。

示例：

<div id="parent">
  <p>这是一个段落</p>
  <ul>
    <li>列表项1</li>
    <li>列表项2</li>
  </ul>
</div>

<script>
var child = document.querySelector('li');
console.log(child.parentNode); // 输出的是<ul>元素

三、获取兄弟节点

使用previousSibling和nextSibling属性可以获取当前元素的上一个兄弟节点和下一个兄弟节点。但是需要注意的是，这两个属性返回的是包含空格和注释节点在内的所有节点，所以可能需要进一步处理才能获取到想要的节点。

示例：

<div>
  <p>这是一个段落</p>
  <ul>
    <li>列表项1</li>
    <li id="current">列表项2</li>
    <li>列表项3</li>
  </ul>
  <p>这也是一个段落</p>
</div>

<script>
var current = document.getElementById('current');
console.log(current.previousSibling); // 输出的是上一个兄弟节点<p>这是一个段落</p>
console.log(current.nextSibling); // 输出的是下一个兄弟节点<li>列表项3</li>
</script>

四、获取指定类型的子元素

如果只想获取指定类型的子元素，可以使用children属性来获取当前元素的所有指定类型的子元素。

示例：

<div id="parent">
  <p>这是一个段落</p>
  <p>这也是一个段落</p>
  <ul>
    <li>列表项1</li>
    <li>列表项2</li>
  </ul>
</div>

<script>
var parent = document.getElementById('parent');
var children = parent.children; // 获取<div>元素下的所有子元素节点，但是不包括文本节点和注释节点
console.log(children); // 输出的是一个包含<p>和<ul>的HTMLCollection对象
</script>