Javascript中parentNode, childNodes, children的应用详解

在Javascript中，parentNode, childNodes和children都是DOM Node对象中的属性或方法，用于操作和访问HTML文档中的元素节点。

parentNode

parentNode 是通过访问节点的父节点来获取该节点的方法。

在HTML中，我们可以把它想象成一个层次关系。parentNode是一个节点的父节点，直到根节点(即文档节点), 子节点也可以称为该节点的后代节点。

比如，我们可以通过这样的方式来获取一个DOM节点的父节点：

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

接下来，我们将会给出一个简单的示例来说明parentNode的实际应用。

<p id="parent">  <p id="child">Hello World!</p></p>

var childNode = document.getElementById("child");var parent = childNode.parentNode;console.log(parent); // 输出 <p id="parent">...</p>

在上面的示例中，我们首先获取到了一个id为“child”的p元素节点，然后通过调用该节点的parentNode方法获取了它的父节点，即id为“parent”的p元素节点。

childNodes

childNodes属性返回一个DOM节点的子节点列表，其类型为NodeList对象。该列表包含该节点的所有子节点，不仅包括元素节点，还包括文本节点、注释节点等。

我们可以通过以下方式来获取一个对象节点的子节点列表：

var parent = document.getElementById("container");var childList = parent.childNodes;

接下来，我们将会给出一个简单的示例来说明childNodes的实际应用。

<p id="container">  <p id="child">Hello World!</p>  <ul>    <li>Item 1</li>    <li>Item 2</li>    <li>Item 3</li>  </ul>  This is a text node.</p>

var parent = document.getElementById("container");var childList = parent.childNodes;console.log(childList.length); // 输出 5

在上面的示例中，我们首先获取到了一个id为“container”的p元素节点，然后调用该节点的childNodes方法获取其所有的子节点列表，该列表包含一个文本节点和三个元素节点。

children

与childNodes不同的是，children属性返回一个DOM节点的子元素节点（即不包括文本节点、注释节点等）。 children 返回的类型为HTMLCollection对象。

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

接下来，我们将会给出一个简单的示例来说明children的实际应用。

<p id="container">  <p id="child">Hello World!</p>  <ul>    <li>Item 1</li>    <li>Item 2</li>    <li>Item 3</li>  </ul>  This is a text node.</p>

var parent = document.getElementById("container");var childElements = parent.children;console.log(childElements.length); // 输出 2

在上面的示例中，我们首先获取到了一个id为“container”的p元素节点，然后调用该节点的children方法获取其所有的子元素节点列表，该列表包含两个元素节点：p元素节点和ul元素节点。

综上所述，parentNode， childNodes和children是Javascript中常用的DOM节点操作属性或方法，能够对HTML文档中的节点进行访问、查找、操作，方便我们在Web开发中快速准确地实现所需的效果。