引言
HTML DOM（文档对象模型）是浏览器用于解析和操作HTML文档的接口。JavaScript作为网页编程的主要语言，可以轻松地通过DOM操作网页元素，从而实现丰富的交互效果。本文将深入探讨HTML DOM的原理，并通过实战案例展示如何使用JavaScript操作网页元素。
HTML DOM基础
什么是DOM？
DOM是文档对象模型的缩写，它将HTML文档映射为一个树形结构，每个节点代表HTML文档中的一个元素。通过DOM，JavaScript可以访问和修改HTML文档的任何部分。
DOM树结构
DOM树由节点组成，节点类型包括元素节点、文本节点、属性节点等。以下是一个简单的DOM树结构示例：
标题
段落文本
文本
在上面的示例中，
、
、
、
和
都是元素节点，它们构成了DOM树。
JavaScript操作DOM
获取DOM元素
要操作DOM元素，首先需要获取它们。以下是一些常用的DOM获取方法：
getElementById(id)
：通过ID获取元素。
getElementsByClassName(class)
：通过类名获取元素。
getElementsByTagName(tagName)
：通过标签名获取元素。
querySelector(selector)
：通过CSS选择器获取元素。
以下是一个获取指定元素的示例：
var element = document.getElementById(“container”);
修改DOM元素
获取到元素后，可以对其进行修改，例如改变文本内容、添加样式、修改属性等。
innerHTML
：获取或设置元素的内容（包括HTML标签）。
innerText
：获取或设置元素的文本内容。
style
：获取或设置元素的样式。
以下是一个修改元素文本内容的示例：
element.innerHTML = “新的内容”;
添加和删除元素
可以通过DOM操作添加和删除元素。
createElement(tagName)
：创建一个新的元素节点。
appendChild(newChild)
：将新元素添加到指定元素的子节点列表末尾。
removeChild(oldChild)
：从父元素中删除子元素。
以下是一个添加新元素到DOM的示例：
var newElement = document.createElement(“p”);
newElement.innerText = “新段落”;
element.appendChild(newElement);
实战案例
以下是一个使用JavaScript操作DOM的实战案例：动态创建表格并填充数据。
在上面的示例中，我们首先创建了一个按钮，当点击按钮时，会调用
createTable
函数。该函数首先获取容器元素，然后创建一个表格，接着创建表头和表格主体，并填充数据。最后，将表格添加到容器元素中。
总结
通过本文的学习，相信你已经对HTML DOM有了更深入的了解，并掌握了使用JavaScript操作DOM的基本技巧。在实际开发中，灵活运用DOM操作可以帮助你实现丰富的网页交互效果。