HTML DOM（文档对象模型）是一个编程接口，它允许开发者通过 JavaScript 来操作 HTML 文档的结构、内容和样式。HTML DOM 将 HTML 文档表示为一个树形结构，每个节点都是一个对象，代表文档的一部分。通过操作这些对象，我们可以实现对 HTML 文档的动态修改和控制。

在本文中，我们将介绍如何使用 HTML DOM 来实现一些常见的功能，如获取元素、修改元素内容、添加和删除元素等。

1、获取元素

要获取 HTML 文档中的某个元素，我们需要使用 document.getElementById()、document.getElementsByClassName() 或 document.getElementsByTagName() 方法，这些方法都返回一个包含匹配元素的数组。

要获取 id 为 "myDiv" 的元素，可以使用以下代码：

var myDiv = document.getElementById("myDiv");

2、修改元素内容

要修改 HTML 文档中的元素内容，我们可以使用 innerHTML、textContent 或 innerText 属性，这些属性分别用于设置或获取元素的 HTML、纯文本内容。

要将 id 为 "myDiv" 的元素的内容替换为 "Hello, World!"，可以使用以下代码：

var myDiv = document.getElementById("myDiv");
myDiv.innerHTML = "Hello, World!";

3、添加和删除元素

要向 HTML 文档中添加元素，我们可以创建一个新的元素对象，然后使用 appendChild()、insertBefore() 或 replaceChild() 方法将其添加到文档中，要删除元素，我们可以使用 removeChild() 方法。

要在 id 为 "myDiv" 的元素后添加一个新的段落，可以使用以下代码：

var newParagraph = document.createElement("p");
newParagraph.innerHTML = "This is a new paragraph.";
var myDiv = document.getElementById("myDiv");
myDiv.parentNode.insertBefore(newParagraph, myDiv.nextSibling);

4、修改元素属性

要修改 HTML 文档中的元素属性，我们可以使用 setAttribute() 或 getAttribute() 方法，这些方法分别用于设置或获取元素的指定属性值。

要将 id 为 "myDiv" 的元素的 class 属性设置为 "myClass"，可以使用以下代码：

var myDiv = document.getElementById("myDiv");
myDiv.setAttribute("class", "myClass");

5、事件处理

HTML DOM 还提供了丰富的事件处理功能，允许我们为元素添加事件监听器，以便在特定事件发生时执行相应的函数，要为元素添加事件监听器，我们可以使用 addEventListener() 方法。

要为 id 为 "myButton" 的按钮添加一个点击事件监听器，当用户点击按钮时弹出一个警告框，可以使用以下代码：

var myButton = document.getElementById("myButton");
myButton.addEventListener("click", function() {
alert("Button clicked!");
});

HTML DOM 是一个非常强大的工具，可以帮助我们轻松地操作和控制 HTML 文档，通过学习并 HTML DOM，我们可以实现许多复杂的网页功能，提高我们的开发效率。