javascript 获取HTML DOM父、子、临近节点

获取 HTML DOM 的父、子、相邻节点是 JavaScript 开发中经常需要用到的功能之一。下面，我将为您详细讲解这个过程，包含两个示例说明。

获取父节点

如果需要获取一个节点的父节点，可以使用 parentNode 属性。例如，要获取一个 id 为 "child" 的节点的父节点，可以使用以下代码：

const childNode = document.querySelector("#child");
const parentNode = childNode.parentNode;

这样，变量 parentNode 就会包含 childNode 节点的父节点。

获取子节点

如果需要获取一个节点的子节点，可以使用 childNodes 属性。但需要注意的是，childNodes 返回的是一个节点的所有子节点的 NodeList，包括其文本和空格节点。因此，为了获得节点元素，需要使用 children 属性，这个属性返回一个只包括元素节点的 HTMLCollection。

例如，要获取一个 id 为 "parent" 的节点的子节点元素，可以使用以下代码：

const parentElement = document.querySelector("#parent");
const childElements = parentElement.children;

// 获取子节点的数量
const childCount = childElements.length;

// 遍历所有子节点
for (let i = 0; i < childCount; i++) {
  console.log(childElements[i]);
}

这样，就会得到一个包含所有子元素节点的 HTMLCollection。如需访问单个子节点，可以使用 children 这个 HTMLCollection 中的子节点数组索引值。

获取相邻的兄弟节点

如果需要获取某个节点的相邻节点，可以使用 nextSibling 或 previousSibling 属性。这两个属性可以分别获取节点的下一个兄弟节点和前一个兄弟节点。

例如，要获取 id 为 "child" 的节点的下一个兄弟节点，可以使用以下代码：

const childNode = document.querySelector("#child");
const nextSibling = childNode.nextSibling;

这样，变量 nextSibling 就会包含 childNode 节点的下一个兄弟节点。如果需要获取前一个兄弟节点，可以使用 previousSibling 属性。

以上就是获取 HTML DOM 节点的父、子、相邻节点的完整攻略，希望对你有所帮助。