文章目录
- 1. 什么是DOM
- 2. DOM的层次结构
- 3. 获取DOM元素
- 通过标签名获取元素
- 通过ID获取元素
- 通过类名获取元素
- 4. 操作DOM元素
- 修改元素内容
- 修改元素样式
- 添加新元素
- 5. 事件处理
- 6. 总结
文档对象模型（DOM）是 JavaScript 中一个重要的概念， 它允许开发者通过脚本语言操作 HTML 和 XML 文档的结构。本篇博客将介绍 DOM 的基本概念，帮助你更好地理解和应用这一重要的 Web 开发工具。
1. 什么是DOM
DOM 是一种用于表示和操作文档结构的树状模型。它将 HTML 或 XML 文档中的每个元素、属性、文本等都视为一个对象，通过这些对象，你可以使用 JavaScript 来操纵文档的内容、结构和样式。
2. DOM的层次结构
DOM 以树状结构表示文档，树的根节点是文档节点，文档节点包含了整个文档。文档节点的子节点可以是元素节点、文本节点、注释节点等。
<!DOCTYPE html>
<html><head><title>DOM Basics</title></head><body><h1>你好, DOM!</h1><p>这是一段落</p></body>
</html>
在上述例子中，文档节点是 html 元素，它有两个子节点 head 和 body。而 body 元素又包含两个子节点 h1 和 p
3. 获取DOM元素
在 JavaScript 中，你可以通过多种方式获取 DOM 元素，最常用的方法是通过标签名、ID、类名等。
通过标签名获取元素
let paragraphs = document.getElementsByTagName("p");
在上述例子中，通过 getElementsByTagName 方法获取了所有 p 元素，返回一个 HTMLCollection 对象。
通过ID获取元素
let heading = document.getElementById("myHeading");
在上述例子中，通过 getElementById 方法获取了 ID 为 myHeading 的元素。
通过类名获取元素
let elements = document.getElementsByClassName("myClass");
在上述例子中，通过 getElementsByClassName 方法获取了所有具有类名 myClass 的元素。
4. 操作DOM元素
修改元素内容
heading.innerHTML = "New Heading";
在上述例子中，通过 innerHTML 属性修改了元素的内容。
修改元素样式
paragraphs[0].style.color = "blue";
在上述例子中，通过 style 属性修改了第一个段落的文本颜色。
添加新元素
let newParagraph = document.createElement("p");
newParagraph.innerHTML = "This is a new paragraph.";
document.body.appendChild(newParagraph);
在上述例子中，通过 createElement 方法创建了一个新的 p 元素，并通过 appendChild 方法将它添加到文档的 body 中。
5. 事件处理
DOM 也提供了处理用户交互的能力，通过事件（如点击、鼠标移动等）可以触发 JavaScript 代码的执行。
document.getElementById("myButton").addEventListener("click", function() {alert("Button Clicked!");
});
在上述例子中，通过 addEventListener 方法给 ID 为 myButton 的按钮元素添加了一个点击事件的监听器。
6. 总结
文档对象模型（DOM）是 JavaScript 中用于操作 HTML 和 XML 文档的重要概念。它以树状结构表示文档的层次关系，通过提供各种方法和属性，使开发者能够轻松地获取、修改和创建文档中的元素。DOM 也支持事件处理，使得用户交互可以通过 JavaScript 来响应和控制。希望通过本篇博客，你对 DOM 的基本概念有了更深入的理解。
 Using the CLI)
