DOM 节点

原创于 2025-11-29 22:02:49 发布 · 378 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#开发语言

DOM 节点

引言

DOM（文档对象模型）是Web开发中一个至关重要的概念，它将HTML或XML文档结构化，使得开发者可以轻松地访问和操作页面上的元素。本文将深入探讨DOM节点的概念、类型、属性以及操作方法，帮助开发者更好地理解和运用DOM。

什么是DOM节点？

DOM节点是构成HTML文档的基本单元，包括元素节点、文本节点、属性节点等。每个节点都代表文档中的一个特定部分，如标题、段落、链接等。通过操作DOM节点，开发者可以动态地修改网页内容、样式和行为。

DOM节点的类型

以下是常见的DOM节点类型：

元素节点（Element）：代表HTML或XML文档中的元素，如<div>、<p>、<a>等。
文本节点（Text）：包含元素内容，如标题、段落中的文字。
属性节点（Attribute）：代表元素的属性，如<a>标签的href属性。
注释节点（Comment）：代表HTML文档中的注释，如。
文档节点（Document）：代表整个HTML文档，是DOM树的根节点。

DOM节点的属性

以下是常见的DOM节点属性：

id：元素的唯一标识符。
className：元素的类名。
innerHTML：获取或设置元素内部HTML内容。
innerText：获取或设置元素内部文本内容。
parentNode：元素的父节点。
childNodes：元素的子节点列表。

操作DOM节点

以下是一些常用的DOM节点操作方法：

创建节点：使用document.createElement()方法创建一个新元素节点。
添加节点：使用appendChild()、insertBefore()、replaceChild()等方法将节点添加到指定位置。
删除节点：使用removeChild()方法删除节点。
修改节点：使用setAttribute()、setAttributeNode()等方法修改节点属性。
查询节点：使用getElementById()、getElementsByClassName()、getElementsByTagName()等方法查询节点。

示例

以下是一个简单的示例，展示如何使用DOM节点操作方法：

// 创建一个新元素节点
var newElement = document.createElement("div");
newElement.id = "newDiv";
newElement.className = "newClass";
newElement.innerHTML = "这是一个新元素";

// 将新元素添加到文档中
document.body.appendChild(newElement);

// 获取新元素
var newDiv = document.getElementById("newDiv");

// 修改新元素属性
newDiv.className = "modifiedClass";
newDiv.innerHTML = "属性已修改";

// 删除新元素
document.body.removeChild(newDiv);