当前位置：首页 > news >正文

DOM 改变节点

news 2026/6/30 22:19:12

DOM 改变节点

概述

DOM（文档对象模型）是现代网页开发中不可或缺的技术之一。在网页中，DOM树结构代表了HTML文档的结构。当需要对网页进行动态修改时，改变DOM节点成为了一种常用的手段。本文将详细介绍DOM改变节点的相关概念、方法和技巧。

1. DOM改变节点的意义

改变DOM节点有以下几点意义：

实现动态交互：通过改变DOM节点，可以实现网页元素的动态显示、隐藏、添加、删除等效果，从而实现丰富的交互体验。
提高用户体验：DOM改变节点可以实时响应用户的操作，使网页更具动态性和实时性，提升用户体验。
实现复杂功能：许多复杂的网页功能，如表单验证、分页显示、数据展示等，都需要通过改变DOM节点来实现。

2. 改变DOM节点的方法

改变DOM节点主要有以下几种方法：

2.1 创建新节点

创建新节点可以使用document.createElement()方法，该方法返回一个指定类型的元素节点。

var newElement = document.createElement("p"); newElement.innerHTML = "这是一个新创建的段落。";

2.2 插入节点

插入节点可以使用insertBefore()、appendChild()、insertAdjacentElement()等方法。

2.2.1`insertBefore()`

insertBefore()方法可以在指定的子节点之前插入一个新的子节点。

var parent = document.getElementById("parent"); var newElement = document.createElement("div"); var referenceElement = document.getElementById("reference"); parent.insertBefore(newElement, referenceElement);

2.2.2`appendChild()`

appendChild()方法可以将一个子节点添加到父节点的末尾。

var parent = document.getElementById("parent"); var newElement = document.createElement("div"); parent.appendChild(newElement);

2.2.3`insertAdjacentElement()`

insertAdjacentElement()方法可以在当前元素的前面或后面插入一个元素。

var element = document.getElementById("element"); element.insertAdjacentElement("afterbegin", newElement);

2.3 删除节点

删除节点可以使用removeChild()方法。

var parent = document.getElementById("parent"); var elementToRemove = document.getElementById("elementToRemove"); parent.removeChild(elementToRemove);

2.4 修改节点内容

修改节点内容可以使用innerHTML、innerText、textContent等属性。

var element = document.getElementById("element"); element.innerHTML = "新的内容";

3. 实例：动态添加列表项

以下是一个简单的实例，演示如何使用DOM改变节点动态添加列表项。

<!DOCTYPE html> <html> <head> <title>动态添加列表项</title> </head> <body> <ul id="list"></ul> <button onclick="addListItem()">添加列表项</button> <script> function addListItem() { var list = document.getElementById("list"); var newItem = document.createElement("li"); newItem.textContent = "新的列表项"; list.appendChild(newItem); } </script> </body> </html>