DOM（文档对象模型）介绍及使用

---

前言

  DOM（文档对象模型）是网页或应用程序的结构化表示，它通过将网页的内容和结构转换为对象，使得程序能够通过编程语言（如 JavaScript）动态地访问和修改网页的内容、结构和样式。DOM 提供了一个将网页视作一棵树形结构的模型，每一个节点代表文档中的一个部分（如元素、属性、文本等）。

一、DOM 的基本结构

1. 文档对象

  整个 HTML 页面被表示为一个文档对象。

2. 元素节点

  HTML 标签（如 div标签、p标签）是 DOM 树中的元素节点。

3. 文本节点

  包含在 HTML 标签内的文本内容。

4. 属性节点

  HTML 标签的属性（如 id、class）也是节点。

例如，以下 HTML：

<div id="content">
  <h1>欢迎来到我的网站</h1>
  <p>这是一个示例页面。</p>
</div>

对应的 DOM 树会像这样：

Document
  └── HTML
        └── BODY
              └── DIV (id="content")
                    ├── H1 (text="欢迎来到我的网站")
                    └── P (text="这是一个示例页面")

二、DOM 的使用：通过 JavaScript 操作网页

  你可以通过 JavaScript 来访问和操作 DOM，从而修改网页内容、添加新元素、删除元素等。

1. 获取 DOM 元素

  使用 document 对象来获取网页中的元素，可以通过多种方法：

1.1 通过 ID 获取元素

    getElementById()

1.2 通过类名获取元素集合

    getElementsByClassName()

1.3 通过标签名获取元素集合

    getElementsByTagName()

1.4 通过 CSS 选择器获取第一个匹配的元素

    querySelector()

1.5 通过 CSS 选择器获取所有匹配的元素

    querySelectorAll()

代码如下（示例）：

// 获取 ID 为 "content" 的元素
let content = document.getElementById('content');

// 获取所有类名为 "highlight" 的元素
let highlights = document.getElementsByClassName('highlight');

// 获取第一个 <p> 标签
let firstParagraph = document.querySelector('p');

2. 修改 DOM 元素

  可以通过 JavaScript 修改 DOM 元素的属性、内容和样式：

2.1 修改内容

2.1.1 修改文本内容

    textContent

2.1.2 修改HTML内容

    innerHTML

2.2 修改属性

2.2.1 修改元素的属性

    setAttribute()

2.3 修改样式

  直接操作style属性。

代码如下（示例）：

// 修改文本内容
content.textContent = "新的内容";

// 修改 HTML 内容
firstParagraph.innerHTML = "<strong>更新后的段落</strong>";

// 修改元素的属性
content.setAttribute('class', 'newClass');

// 修改元素的样式
content.style.color = 'red';

2.3 创建和删除DOM元素

2.3.1 创建新元素

    document.createElement()

2.3.2 插入新元素

    appendChild()、insertBefore()

2.3.3 删除元素

    removeChild()、remove()

代码如下（示例）：

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

// 将新创建的元素添加到 DOM 中
content.appendChild(newParagraph);

// 删除某个元素
firstParagraph.remove();

三、事件处理

  DOM 还允许你为元素添加事件监听器，以响应用户的交互（如点击、键盘输入等）。

1. 常用事件

1.1 鼠标点击事件

    click

1.2 鼠标悬停事件

    mouseover

1.3 按键按下事件

    keydown

代码如下（示例）：

// 为按钮添加点击事件
let button = document.getElementById('myButton');
button.addEventListener('click', function() {
  alert('按钮被点击了！');
});

四、常见DOM操作示例

1. 操作表单

// 获取表单元素
let form = document.getElementById('myForm');
let input = form.querySelector('input');

// 获取输入值
let inputValue = input.value;

// 设置输入框的值
input.value = '新的文本';

2. 修改样式

// 通过样式修改元素的外观
let heading = document.querySelector('h1');
heading.style.fontSize = '36px';
heading.style.color = 'blue';

3. 操作列表

// 获取列表并添加新项
let list = document.getElementById('myList');
let newItem = document.createElement('li');
newItem.textContent = '新项';
list.appendChild(newItem);

---

总结

  DOM 是前端开发中非常重要的一部分，它使得开发者可以动态地访问和修改网页的内容、结构、样式以及与用户的交互。通过掌握 DOM 操作，你可以实现丰富的动态效果和交互体验。