浅谈js的html元素的父节点,子节点

2023年6月10日下午1:01 • JavaScript

当我们在编写 JavaScript 代码时，我们经常需要对 HTML 页面中的元素进行操作，而理解 HTML 元素的父节点和子节点是非常重要的。在本文中，我们将深入讨论这个话题并为您提供完整攻略。

HTML 元素的父节点和子节点

在 HTML 中，父节点表示该节点的上一级节点，而子节点是该节点的下一级节点。例如，如果我们有一个 div 元素，它包含一个 p 元素，则 div 是 p 元素的父元素，而 p 元素是 div 元素的子元素。

HTML 元素的父节点和子节点可以通过 JavaScript 中的属性来访问。以下是一些常用的属性：

parentNode：获取当前元素的父节点。
childNodes：获取当前元素的所有子节点。
firstChild：获取当前元素的第一个子节点。
lastChild：获取当前元素的最后一个子节点。
previousSibling：获取当前元素的前一个兄弟节点。
nextSibling：获取当前元素的后一个兄弟节点。

在下面的示例中，我们将使用这些属性来访问和操作 HTML 元素的父节点和子节点。

示例一

在这个示例中，我们将创建一个 div 元素并添加两个子元素：一个 h2 元素和一个 p 元素。然后，我们将访问子元素并将它们的文本内容输出到控制台中。

<!DOCTYPE html>
<html>
<head>
    <title>示例一</title>
</head>
<body>
    <div id="myDiv">
        <h2>这是标题</h2>
        <p>这是段落。</p>
    </div>

    <script>
        var myDiv = document.getElementById("myDiv");
        var children = myDiv.childNodes;

        for (var i = 0; i < children.length; i++) {
            console.log(children[i].textContent);
        }
    </script>
</body>
</html>

在这个示例中，我们首先获取了 div 元素的引用，并使用 childNodes 属性来访问它的子元素。我们使用 for 循环遍历所有子元素，并使用 textContent 属性来获取其文本内容并输出到控制台中。代码的输出应该如下所示：

这是标题
这是段落。

示例二

在这个示例中，我们将使用 appendChild 方法将一个新元素添加为 div 元素的子元素，并找到前一个兄弟节点并将其删除。

<!DOCTYPE html>
<html>
<head>
    <title>示例二</title>
</head>
<body>
    <div id="myDiv">
        <h2>这是标题</h2>
        <p>这是段落。</p>
    </div>

    <script>
        var myDiv = document.getElementById("myDiv");
        var newNode = document.createElement("div");
        var sibling = myDiv.firstChild.nextSibling;

        myDiv.appendChild(newNode);
        myDiv.removeChild(sibling);
    </script>
</body>
</html>

在这个示例中，我们首先获取了 div 元素的引用，并使用 createElement 方法创建一个新的 div 元素。然后，我们使用 appendChild 方法将其添加为 div 元素的子元素。接着，我们使用 firstChild 和 nextSibling 属性来获取前一个兄弟节点的引用并使用 removeChild 方法将其删除。这将在页面中删除第一个子元素 h2，并添加一个新元素 div。