揭秘HTML DOM操作：实战样例代码全解析，轻松掌握页面元素操控技巧

HTML DOM（文档对象模型）是Web开发中非常重要的一个概念，它允许开发者通过JavaScript动态地操作HTML文档。掌握DOM操作技巧对于创建交互式网页至关重要。本文将深入解析HTML DOM操作，并通过实战样例代码，帮助读者轻松掌握页面元素操控技巧。

1. 了解DOM

DOM是HTML或XML文档的树形结构表示，它将文档映射为一个易于编程操作的接口。每个节点都是一个对象，这些对象代表了文档中的元素、文本、属性等。

1.1 节点类型

元素节点：代表HTML标签，如<div>、<p>等。
文本节点：代表元素内的文本内容。
属性节点：代表元素的属性，如id、class等。
注释节点：代表文档中的注释。

1.2 节点关系

父节点：元素的直接上级元素。
子节点：元素的直接下级元素。
兄弟节点：与元素同级的其他元素。

2. DOM操作基础

DOM操作主要包括获取元素、修改元素内容和属性、添加或删除元素等。

2.1 获取元素

2.1.1 通过ID获取元素

var element = document.getElementById("elementId");

2.1.2 通过类名获取元素

var elements = document.getElementsByClassName("className");

2.1.3 通过标签名获取元素

var elements = document.getElementsByTagName("tagName");

2.1.4 通过查询选择器获取元素

var element = document.querySelector("CSS选择器");

2.2 修改元素内容

2.2.1 设置文本内容

element.textContent = "新的文本内容";

2.2.2 设置HTML内容

element.innerHTML = "<span>新的HTML内容</span>";

2.3 修改元素属性

element.setAttribute("属性名", "属性值");

2.4 添加或删除元素

2.4.1 创建新元素

var newElement = document.createElement("div");

2.4.2 将新元素添加到文档中

document.body.appendChild(newElement);

2.4.3 删除元素

element.parentNode.removeChild(element);

3. 实战样例

以下是一个简单的DOM操作实战样例，用于在页面上动态添加和删除列表项。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>DOM操作实战样例</title> <script> function addListItem() { var list = document.getElementById("myList"); var newItem = document.createElement("li"); newItem.textContent = "新列表项"; list.appendChild(newItem); } function deleteListItem() { var list = document.getElementById("myList"); list.removeChild(list.lastChild); } </script> </head> <body> <h2>DOM操作实战样例</h2> <ul id="myList"> <li>列表项1</li> <li>列表项2</li> </ul> <button onclick="addListItem()">添加列表项</button> <button onclick="deleteListItem()">删除列表项</button> </body> </html>

在这个样例中，我们创建了一个简单的HTML页面，其中包含一个列表和一个按钮。点击“添加列表项”按钮时，会调用addListItem函数，该函数创建一个新的列表项并将其添加到页面中。点击“删除列表项”按钮时，会调用deleteListItem函数，该函数删除列表中的最后一个列表项。

通过以上实战样例，读者可以更好地理解DOM操作的基本原理和技巧。希望本文能帮助读者轻松掌握页面元素操控技巧。