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

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的实际应用。

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

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

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

childNodes

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

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

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

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

<div 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.
</div>

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

console.log(childList.length); // 输出 5

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

children

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

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

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

<div 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.
</div>

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

console.log(childElements.length); // 输出 2

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

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