JavaScript 中的节点
Anika Tabassum Era
2024年2月15日
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>
输出：
