JavaScript - 文档对象模型 (DOM)

什么是 DOM？

文档对象模型（Document Object Model，简称 DOM）是 HTML 和 XML 文档的编程接口。它将文档的结构表示为一个树状层次结构，每个对象对应于文档的一部分，比如元素、属性或文本节点。

JavaScript - HTML DOM

想象你正在用乐高积木建造一座房子。DOM 就像一份神奇的蓝图，不仅展示了房子是如何建造的，还允许你使用 JavaScript 来操纵和重新排列积木。它是一个强大的工具，架起了网页和编程语言之间的桥梁。

DOM 的关键概念

节点（Node）：文档的每一部分都是一个节点。元素、属性和文本都是不同类型的节点。
树结构：DOM 将文档表示为树，以 document 对象为根。
遍历（Traversal）：你可以使用各种方法和属性在 DOM 树中导航。
操纵（Manipulation）：DOM 允许你动态地更改文档的结构、样式和内容。

让我们来看一个简单的例子来阐述这些概念：

<!DOCTYPE html>
<html>
<head>
<title>我的第一个 DOM 示例</title>
</head>
<body>
<h1 id="mainHeading">欢迎来到 DOM</h1>
<p>这是一个段落。</p>
</body>
</html>

在这个 HTML 文档中，DOM 树看起来会像这样：

document
└── html
├── head
│   └── title
│       └── "我的第一个 DOM 示例"
└── body
├── h1
│   └── "欢迎来到 DOM"
└── p
└── "这是一个段落。"

什么是 HTML DOM？

HTML DOM 是 HTML 的标准对象模型和编程接口。它定义了：

HTML 元素作为对象
所有 HTML 元素的属性
访问所有 HTML 元素的方法
所有 HTML 元素的事件

本质上，HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。

使用 HTML DOM

让我们探索一些使用 HTML DOM 的常见操作：

访问元素

// 通过 ID 获取元素
const heading = document.getElementById('mainHeading');

// 通过标签名获取元素
const paragraphs = document.getElementsByTagName('p');

// 通过类名获取元素
const highlights = document.getElementsByClassName('highlight');

// 使用 querySelector 进行更复杂的选取
const firstParagraph = document.querySelector('p');

在这些示例中，我们使用不同的方法从 HTML 文档中选择元素。这就像使用魔法棒指向我们网页的特定部分！

更改内容

// 更改元素的文字内容
heading.textContent = '欢迎来到精彩绝伦的 DOM 世界！';

// 更改元素的 HTML 内容
paragraphs[0].innerHTML = '这个段落已被 <strong>修改</strong>！';

在这里，我们正在更新我们元素的内容。这就像瞬间擦除并重写我们网页的部分内容！

修改样式

// 更改元素的风格
heading.style.color = 'blue';
heading.style.fontSize = '24px';

通过这些行，我们正在给我们的标题进行改造，改变它的颜色和大小。这就像为你的网页元素请来了一位时尚设计师！

创建和移除元素

// 创建一个新元素
const newParagraph = document.createElement('p');
newParagraph.textContent = '这是一个新创建的段落。';

// 将新元素添加到文档中
document.body.appendChild(newParagraph);

// 移除一个元素
document.body.removeChild(paragraphs[0]);

在这个例子中，我们扮演网页建筑师的角色的——构建新的元素和拆除旧的元素，只需几行代码！

为什么需要 DOM？

DOM 对于以下原因至关重要：

动态网页：没有 DOM，网页将会是静态的。DOM 允许我们创建交互性和动态的网页体验。
关注点分离：DOM 提供了一种使用 JavaScript 操纵网页内容和结构的方法，将其与 HTML 和 CSS 分离开来。
跨浏览器兼容性：DOM 提供了一个在各个浏览器中工作的标准编程接口，确保了 Web 开发的连贯性。
事件处理：DOM 允许我们将事件监听器附加到元素上，使我们能够响应用户交互，如点击、按键和鼠标移动。
AJAX 和单页应用：DOM 对于在不重新加载整个页面的情况下更新网页的某些部分至关重要，这是现代 Web 应用的基础。

让我们看一个结合了许多这些概念的例子：

<!DOCTYPE html>
<html>
<head>
<title>待办事项列表</title>
<style>
.completed { text-decoration: line-through; }
</style>
</head>
<body>
<h1>我的待办事项列表</h1>
<input type="text" id="newTodo">
<button id="addTodo">添加待办事项</button>
<ul id="todoList"></ul>

<script>
const newTodoInput = document.getElementById('newTodo');
const addTodoButton = document.getElementById('addTodo');
const todoList = document.getElementById('todoList');

addTodoButton.addEventListener('click', function() {
const todoText = newTodoInput.value;
if (todoText) {
const li = document.createElement('li');
li.textContent = todoText;

li.addEventListener('click', function() {
this.classList.toggle('completed');
});

todoList.appendChild(li);
newTodoInput.value = '';
}
});
</script>
</body>
</html>

这个例子演示了一个简单的待办事项列表应用。它展示了：

使用 DOM 访问元素
创建新元素
修改元素内容和样式
处理事件
不重新加载页面动态更新页面

通过使用 DOM，我们创建了一个交互式的应用程序，它响应用户输入并实时更新。这就是 DOM 的力量！

常用的 DOM 方法和属性

以下是一些常用的 DOM 方法和属性表：

方法/属性	描述
`getElementById()`	返回具有指定 ID 的元素
`getElementsByClassName()`	返回具有指定类名的元素集合
`getElementsByTagName()`	返回具有指定标签名的元素集合
`querySelector()`	返回匹配 CSS 选择器的第一个元素
`querySelectorAll()`	返回匹配 CSS 选择器的所有元素
`createElement()`	创建一个新元素
`appendChild()`	添加一个新子元素
`removeChild()`	移除一个子元素
`innerHTML`	获取或设置元素内的 HTML 内容
`textContent`	获取或设置元素的文本内容
`style`	获取或设置元素的行内样式
`classList`	允许操作元素的类
`addEventListener()`	将事件处理器附加到元素

总之，DOM 是一个强大的工具，为网页带来了生命力。它允许我们创建动态、交互式的体验，响应用户操作并实时更新。在你继续 Web 开发的旅程中，你会发现 DOM 是创建吸引人和响应迅速的 Web 应用程序的不可或缺的助手。快乐编码！

Credits: Image by storyset