JavaScript 中的节点

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >

Vue React JavaScript Angular CSS HTML

JavaScript 中的节点

作者：迹忆客最近更新：2024/03/21 浏览次数：

JavaScript 使约定能够跟踪 HTML 元素父节点和子节点。通常，如果我们在另一个元素下有一个元素，则此模式的整体结构将称为父子树。

在 JavaScript 中，我们可以更改父元素的任何子元素。此外，我们可以添加和删除孩子。

在这里，我们将看到两个示例，其中一个将解释我们如何区分多种类型的子元素。另一个示例将描述将新的子元素附加到父元素。

在 JavaScript 中从父节点中选择子节点

在这种情况下，我们将启动一个具有多个 p 元素和一个 article 元素的 div 元素。驱动是挑选所有 p 元素并以不同的色调为它们着色以区分 article 和 p 元素。

让我们关注代码行以便更好地理解。

代码片段：

<!DOCTYPE html>
<html>
<body>
<p>Hello World!</p>
 <article>
   Howdy!
 </article>
<p>Click button to change the color of all p elements.</p>
<button onclick="changeColor()">Hit it</button>
<script>
function changeColor() {
  const Nodelist = document.querySelectorAll("p");
  for (let i = 0; i < Nodelist.length; i++) {
    Nodelist[i].style.color = "blue";
  }
}
</script>
</body>
</html>

输出：

在 JavaScript 中将新的子节点附加到特定的父节点

在这里，我们将看到一个实例，我们将在其中附加一个新的子节点。我们将有一个带有多个 p 元素的 div 元素。

将从脚本标签添加一个新节点。首先，我们将执行 createElement 并创建 p 标签。

稍后我们会将文本添加到 p 元素。下一步将把这个新节点附加到父节点，这个新节点将自动添加到 HTML 预览。

代码片段：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="div1">
<p>paragraph 1.</p>
<p>paragraph 2.</p>
</div>
  <script>
const p = document.createElement("p");
const node = document.createTextNode("paragraph 3.");
p.appendChild(node);
const element = document.getElementById("div1");
element.appendChild(p);
  </script>
</body>
</html>