以下是HTML DOM的主要概念：
1. 文档对象： 文档对象是整个HTML或XML文档的顶层对象，它是HTML DOM的起点。在JavaScript中，可以通过document对象来表示当前文档。
2. 节点： 文档中的每个部分都是一个节点，例如元素、属性、文本等。节点可以是元素节点、属性节点、文本节点等。元素节点表示HTML元素，属性节点表示元素的属性，文本节点表示元素的文本内容。
3. 元素节点： 元素节点表示HTML文档中的元素，例如<div>、<p>、<a>等。通过HTML DOM，你可以通过元素节点来访问和修改元素的属性、样式和内容。
4. 属性节点： 属性节点表示HTML元素的属性，例如id、class、src等。通过HTML DOM，你可以获取和修改元素的属性值。
5. 文本节点： 文本节点表示HTML元素的文本内容，例如<p>Hello, World!</p>中的 "Hello, World!"。通过HTML DOM，你可以获取和修改文本节点的内容。
6. DOM树： HTML DOM 将文档表示为一棵树形结构，其中每个元素都是一个节点。DOM树的根节点是文档节点，其他节点以层次结构组织，形成一个树。
7. 操作DOM： 通过JavaScript，你可以使用HTML DOM来动态地创建、修改、删除文档的元素和属性。这使得你可以实现交互性的网页，根据用户的操作动态地改变页面内容。
以下是一个简单的例子，演示了如何使用JavaScript通过HTML DOM来获取和修改文档中的元素：
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Example</title>
</head>
<body>
<h1 id="myHeading">Hello, World!</h1>
<button onclick="changeText()">Change Text</button>
<script>
// 获取元素节点
var heading = document.getElementById("myHeading");
// 修改元素的文本内容
function changeText() {
heading.innerHTML = "Hello, DOM!";
}
</script>
</body>
</html>
在这个例子中，通过document.getElementById方法获取了ID为myHeading的元素节点，并通过innerHTML属性修改了元素的文本内容。通过这种方式，你可以使用JavaScript操作HTML DOM来实现动态的页面效果。
转载请注明出处：http://www.zyzy.cn/article/detail/4348/HTML