JavaScript 子节点操作指南157

在 JavaScript 中，子节点代表 HTML 元素内部包含的其他元素。操作子节点对于构建动态且交互式 web 页面至关重要。本文将深入探讨 JavaScript 子节点操作，涵盖创建、添加、删除和遍历子节点的各种方法。

创建子节点

可以使用 () 方法创建子节点：

const newElement = ("p");

此方法将创建一个新的 HTML 元素，即段落元素。

添加子节点

可以通过以下方法将子节点添加到父元素中：

appendChild()：将子节点添加到父元素的末尾。

(newElement);

insertBefore()：在指定子节点之前插入新子节点。

(newElement, existingChild);

replaceChild()：用新子节点替换现有子节点。

(newElement, existingChild);

删除子节点

要删除子节点，可以使用 removeChild() 方法：

(child);

遍历子节点

可以通过以下方法遍历子节点：

childNodes：返回父元素的所有子节点列表。

firstChild：返回父元素的第一个子节点。

lastChild：返回父元素的最后一个子节点。

nextSibling：返回指定子节点后面的下一个子节点。

previousSibling：返回指定子节点前面的上一个子节点。

您可以使用这些属性来访问和修改父元素中的所有子节点。

示例

以下示例演示如何使用 JavaScript 操作子节点：

const parent = ("parent");
// 创建一个新的段落元素
const newElement = ("p");
= "这是新的段落";
// 添加新元素到父元素的末尾
(newElement);
// 在现有段落元素前插入新元素
const existingElement = ("existing");
(newElement, existingElement);
// 删除现有段落元素
(existingElement);
// 遍历所有子节点
for (let child of ) {
();
}