引言
HTML DOM（文档对象模型）是现代网页开发的核心技术之一。它允许开发者通过JavaScript来操作HTML文档中的元素，从而实现动态网页的构建。本文将为您提供一个实用指南，帮助您轻松掌握HTML DOM，高效操作网页元素。
HTML DOM 简介
什么是HTML DOM？
HTML DOM是一个树形结构，它表示HTML文档的内容。每个HTML元素都是一个节点，节点之间的关系通过父子、兄弟等关系连接。通过JavaScript访问和操作DOM，可以实现对网页元素的添加、删除、修改等操作。
HTML DOM 节点类型
元素节点
：代表HTML标签，如
等。
文本节点
：代表元素中的文本内容。
属性节点
：代表元素的属性，如
class
、
id
等。
注释节点
：代表HTML文档中的注释。
操作HTML DOM
获取元素
要操作DOM，首先需要获取对应的元素。以下是一些常用的获取元素的方法：
getElementById
：通过元素的ID获取元素。
var element = document.getElementById(“elementId”);
getElementsByClassName
：通过元素的类名获取元素。
var elements = document.getElementsByClassName(“className”);
getElementsByTagName
：通过元素的标签名获取元素。
var elements = document.getElementsByTagName(“tagName”);
querySelector
：通过CSS选择器获取元素。
var element = document.querySelector(“CSS选择器”);
querySelectorAll
：通过CSS选择器获取所有匹配的元素。
var elements = document.querySelectorAll(“CSS选择器”);
添加元素
要向页面中添加元素，可以使用以下方法：
createElement
：创建一个新的元素节点。
var newElement = document.createElement(“tagName”);
appendChild
：将新元素添加到父元素的末尾。
parentElement.appendChild(newElement);
insertBefore
：将新元素插入到父元素的指定子元素之前。
parentElement.insertBefore(newElement, referenceElement);
删除元素
要删除页面中的元素，可以使用以下方法：
removeChild
：从父元素中删除子元素。
parentElement.removeChild(childElement);
innerHTML
：清空元素的内容。
element.innerHTML = “”;
修改元素
要修改页面中的元素，可以使用以下方法：
setAttribute
：修改元素的属性。
element.setAttribute(“attributeName”, “attributeValue”);
style
：修改元素的样式。
element.style.color = “red”;
innerHTML
：修改元素的内容。
element.innerHTML = “新的内容”;
实例
以下是一个简单的示例，展示如何使用HTML DOM操作网页元素：
Hello, World!
在这个示例中，我们通过JavaScript修改了