JS获取节点的兄弟,父级,子级元素的方法

JS获取节点的兄弟、父级、子级元素的方法可以使用DOM提供的方法实现。下面是几种常用的方法：

获取兄弟元素节点

1. nextSibling和previousSibling

nextSibling和previousSibling分别是获取下一个兄弟节点和上一个兄弟节点的方法。这两个方法返回的都是一个节点对象。需要注意的是，获取的兄弟节点可能是文本节点或注释节点，需要通过判断节点的类型来获取元素节点。

var parent = document.getElementById("parent");
var sibling = parent.nextSibling;

while(sibling.nodeType != 1) {
  sibling = sibling.nextSibling;
}

// 找到下一个元素节点，输出它的id
console.log(sibling.id);

2. nextElementSibling和previousElementSibling

nextElementSibling和previousElementSibling分别是获取下一个元素兄弟节点和上一个元素兄弟节点的方法。这两个方法返回的都是一个元素节点。

var sibling = document.getElementById("sibling");
var nextSibling = sibling.nextElementSibling;
var previousSibling = sibling.previousElementSibling;

// 输出下一个兄弟元素和上一个兄弟元素的class
console.log(nextSibling.className);
console.log(previousSibling.className);

获取父元素节点

parentElement

parentElement是获取父元素节点的方法，返回的是一个元素节点。

var child = document.getElementById("child");
var parent = child.parentElement;

// 输出父元素的id
console.log(parent.id);

parentNode

parentNode是获取父节点的方法，返回的也可以是文本节点或注释节点，同样需要通过判断节点的类型来获取元素节点。

var child = document.getElementById("child");
var parent = child.parentNode;

while(parent.nodeType != 1) {
  parent = parent.parentNode;
}

// 找到父元素节点，输出它的id
console.log(parent.id);

获取子元素节点

childNodes

childNodes是获取所有子节点的方法，返回的是一个节点列表，包含所有子节点，其中包括文本节点和注释节点。

var parent = document.getElementById("parent");
var children = parent.childNodes;

// 遍历找到所有元素节点并输出它们的id
for(var i = 0; i < children.length; i++) {
  if(children[i].nodeType == 1) {
    console.log(children[i].id);
  }
}

children

children是获取所有子元素节点的方法，与childNodes的区别在于它只返回子元素节点，不包括文本节点和注释节点。

var parent = document.getElementById("parent");
var children = parent.children;

// 遍历所有子元素节点并输出它们的class
for(var i = 0; i < children.length; i++) {
  console.log(children[i].className);
}