HTML DOM（Document Object Model）是HTML文档的编程接口，它允许开发者通过JavaScript操作网页内容、结构和样式。掌握HTML DOM对于网页开发至关重要。本文将从速查手册的角度，带您深入了解HTML DOM，揭示网页构建的奥秘。
一、HTML DOM基础
1.1 DOM树结构
HTML DOM以树形结构表示文档，每个节点（Node）代表HTML文档中的一个元素。节点类型包括元素节点（Element）、文本节点（Text）、属性节点（Attribute）等。
标题
段落
文本
在上面的示例中，
是根节点，
、
和
是子节点。
1.2 节点关系
DOM节点之间存在父子、兄弟和祖先关系。例如，在上述示例中，
、
和
的父节点，而
、
和
是
1.3 节点操作
JavaScript提供了丰富的API用于操作DOM节点，包括创建、删除、修改和查询节点。
// 创建节点
var newElement = document.createElement(“p”);
newElement.innerHTML = “新段落”;
// 添加节点
var container = document.getElementById(“container”);
container.appendChild(newElement);
// 删除节点
var elementToRemove = document.getElementById(“elementToRemove”);
container.removeChild(elementToRemove);
// 修改节点
var elementToModify = document.getElementById(“elementToModify”);
elementToModify.innerHTML = “修改后的段落”;
二、常用DOM操作速查
2.1 查询节点
document.getElementById(id)
：通过ID查询元素节点。
document.querySelector(selector)
：通过CSS选择器查询元素节点。
document.querySelectorAll(selector)
：通过CSS选择器查询所有匹配的元素节点。
// 通过ID查询元素
var element = document.getElementById(“elementId”);
// 通过CSS选择器查询元素
var elements = document.querySelectorAll(“.class”);
// 通过CSS选择器查询第一个元素
var element = document.querySelector(“.class”);
2.2 创建和删除节点
document.createElement(tagName)
：创建一个新的元素节点。
element.appendChild(child)
：将子节点添加到父节点的末尾。
element.removeChild(child)
：从父节点中删除子节点。
// 创建元素
var newElement = document.createElement(“p”);
newElement.innerHTML = “新段落”;
// 添加元素
var parentElement = document.getElementById(“parentElement”);
parentElement.appendChild(newElement);
// 删除元素
var elementToRemove = document.getElementById(“elementToRemove”);
parentElement.removeChild(elementToRemove);
2.3 修改节点
element.innerHTML
：获取或设置元素的内部HTML。
element.innerText
：获取或设置元素的文本内容。
element.style.property
：获取或设置元素的样式。
// 修改元素内容
var element = document.getElementById(“elementId”);
element.innerHTML = “修改后的内容”;
// 修改元素样式
var element = document.getElementById(“elementId”);
element.style.color = “red”;
三、总结
掌握HTML DOM是网页开发的基础，本文从速查手册的角度，介绍了DOM的基本概念、节点关系、常用操作以及一些示例代码。通过学习和实践，您将能够更好地掌握HTML DOM，为构建更强大的网页打下坚实基础。