DOM（文档对象模型）：理解页面结构

开场白

大家好，欢迎来到今天的讲座！今天我们要聊聊一个前端开发中非常重要的概念——DOM（文档对象模型）。如果你觉得“DOM”听起来很高深莫测，别担心，我会用轻松诙谐的语言，结合一些代码示例，带你一步步理解这个看似复杂的概念。准备好了吗？让我们开始吧！

什么是DOM？

首先，我们来回答一个最基本的问题：什么是DOM？

想象一下，你正在浏览一个网页。这个网页上有各种各样的元素：标题、段落、按钮、图片等等。这些元素并不是随机堆砌在一起的，而是按照一定的结构组织起来的。DOM就是用来描述这种结构的。

简单来说，DOM是浏览器用来表示和操作HTML或XML文档的一种方式。它把整个页面看作一棵树，每个HTML标签都变成了这棵树上的一个节点。通过DOM，我们可以用JavaScript与这些节点进行交互，动态地修改页面的内容、样式和行为。

DOM树的结构

为了更好地理解DOM，我们先来看一个简单的HTML页面：

<!DOCTYPE html>
<html>
  <head>
    <title>我的第一个网页</title>
  </head>
  <body>
    <h1>欢迎来到我的网站</h1>
    <p>这是一个简单的介绍。</p>
    <button>点击我</button>
  </body>
</html>

在DOM中，这段HTML会被解析成一棵树形结构，如下所示：

HTML
├── HEAD
│   └── TITLE
│       └── "我的第一个网页"
└── BODY
    ├── H1
    │   └── "欢迎来到我的网站"
    ├── P
    │   └── "这是一个简单的介绍。"
    └── BUTTON
        └── "点击我"

在这棵树中，<html>是根节点，<head>和<body>是它的子节点。<title>、<h1>、<p>和<button>则是更深层次的子节点。每个节点都可以有自己的属性和内容。

节点类型

DOM中的节点有多种类型，最常见的有以下几种：

节点类型	描述
元素节点	表示HTML标签，如`<div>`、`<p>`、`<button>`等。
文本节点	表示标签之间的文本内容，如`"欢迎来到我的网站"`。
属性节点	表示元素的属性，如`<img src="image.jpg">`中的`src`。
注释节点	表示HTML中的注释，如`<!-- 这是一个注释 -->`。

在实际开发中，我们最常用的是元素节点和文本节点。属性节点虽然也很重要，但通常我们会直接通过元素节点来访问它们。

如何操作DOM？

现在我们已经知道了DOM是什么，接下来的问题是：如何操作DOM？

通过JavaScript，我们可以轻松地与DOM进行交互。常见的操作包括：

选择元素
修改元素的内容
添加或删除元素
修改元素的样式

1. 选择元素

要操作DOM，首先需要找到我们想要操作的元素。JavaScript提供了多种方法来选择元素：

document.getElementById(id)：通过ID选择单个元素。
document.getElementsByClassName(className)：通过类名选择多个元素。
document.getElementsByTagName(tagName)：通过标签名选择多个元素。
document.querySelector(selector)：使用CSS选择器选择单个元素。
document.querySelectorAll(selector)：使用CSS选择器选择多个元素。

示例：选择元素

假设我们有一个HTML页面，包含一个ID为myHeader的<h1>标签：

<h1 id="myHeader">欢迎来到我的网站</h1>

我们可以通过document.getElementById()来选择这个元素，并修改它的内容：

const header = document.getElementById('myHeader');
header.textContent = '你好，世界！';

如果你想选择所有带有highlight类的段落，可以使用getElementsByClassName()：

const paragraphs = document.getElementsByClassName('highlight');
for (let i = 0; i < paragraphs.length; i++) {
  paragraphs[i].style.color = 'red';
}

或者使用更现代的querySelectorAll()：

const paragraphs = document.querySelectorAll('.highlight');
paragraphs.forEach(paragraph => {
  paragraph.style.color = 'blue';
});

2. 修改元素的内容

选中元素后，我们可以通过以下属性来修改它的内容：

innerHTML：获取或设置元素的HTML内容。
textContent：获取或设置元素的纯文本内容。

示例：修改内容

假设我们有一个按钮，点击后会改变页面上的某个段落内容：

<p id="message">初始消息</p>
<button id="changeButton">点击修改消息</button>

我们可以通过JavaScript来实现这个功能：

const message = document.getElementById('message');
const button = document.getElementById('changeButton');

button.addEventListener('click', function() {
  message.innerHTML = '<strong>消息已更新！</strong>';
});

注意：innerHTML会解析并渲染HTML代码，而textContent只会显示纯文本。如果你不需要插入HTML，建议使用textContent，因为它更安全，可以防止XSS攻击。

3. 添加或删除元素

除了修改现有元素的内容，我们还可以通过DOM API动态地添加或删除元素。

appendChild(child)：将一个新元素添加到指定元素的末尾。
insertBefore(newElement, referenceElement)：在指定元素之前插入新元素。
removeChild(child)：从父元素中移除一个子元素。

示例：添加和删除元素

假设我们有一个空的<div>，点击按钮后会在其中添加一个新的段落：

<div id="container"></div>
<button id="addButton">添加段落</button>
<button id="removeButton">删除段落</button>

我们可以通过JavaScript来实现添加和删除功能：

const container = document.getElementById('container');
const addButton = document.getElementById('addButton');
const removeButton = document.getElementById('removeButton');

addButton.addEventListener('click', function() {
  const newParagraph = document.createElement('p');
  newParagraph.textContent = '这是新增的段落';
  container.appendChild(newParagraph);
});

removeButton.addEventListener('click', function() {
  const lastParagraph = container.lastElementChild;
  if (lastParagraph) {
    container.removeChild(lastParagraph);
  }
});

4. 修改元素的样式

除了修改内容，我们还可以通过DOM来动态地修改元素的样式。有两种常见的方式：

直接修改内联样式：使用element.style属性。
切换类名：使用classList API。

示例：修改样式

假设我们有一个按钮，点击后会改变页面上某个段落的背景颜色：

<p id="styledParagraph">这是一个段落。</p>
<button id="styleButton">点击改变样式</button>

我们可以通过JavaScript来实现这个功能：

const paragraph = document.getElementById('styledParagraph');
const button = document.getElementById('styleButton');

button.addEventListener('click', function() {
  paragraph.style.backgroundColor = 'yellow';
});

如果你不想直接修改内联样式，而是希望通过类名来控制样式，可以使用classList：

button.addEventListener('click', function() {
  paragraph.classList.toggle('highlight');
});

在CSS中定义.highlight类：

.highlight {
  background-color: yellow;
}

DOM事件

除了操作DOM本身，我们还可以通过DOM来监听和响应用户的交互事件，比如点击、键盘输入、鼠标移动等。事件处理是前端开发中非常重要的一部分。

常见的DOM事件

事件名称	触发条件
`click`	用户点击元素时触发。
`mouseover`	鼠标移到元素上方时触发。
`mouseout`	鼠标移出元素时触发。
`keydown`	用户按下键盘上的键时触发。
`submit`	用户提交表单时触发。
`load`	页面或资源加载完成后触发。

示例：监听点击事件

假设我们有一个按钮，点击后会弹出一个提示框：

<button id="alertButton">点击弹出提示</button>

我们可以通过JavaScript来监听点击事件：

const alertButton = document.getElementById('alertButton');

alertButton.addEventListener('click', function() {
  alert('你点击了按钮！');
});

总结

今天我们学习了DOM的基本概念和操作方法。DOM是前端开发的核心之一，它帮助我们将HTML页面转换为可操作的对象树。通过JavaScript，我们可以轻松地选择、修改、添加和删除DOM元素，甚至可以监听用户事件并与之互动。

希望今天的讲座对你有所帮助！如果你有任何问题，欢迎随时提问。下次见！ 😄

参考资料：

MDN Web Docs: Document Object Model (DOM)
W3C DOM Standard
You Don’t Know JS (book series by Kyle Simpson)

（注：以上参考资料仅用于引用，未插入外部链接。）