DOM（Document Object Model，文档对象模型）

本文链接：https://blog.youkuaiyun.com/daoshen1314/article/details/142899734

DOM（Document Object Model，文档对象模型）是一个跨平台且与语言无关的接口，允许程序和脚本动态访问和更新文档的内容、结构和样式。DOM 将 HTML 和 XML 文档表示为一个树结构，其中每个节点都表示文档的一部分（例如元素、属性、文本等）。

DOM 的基本概念

文档：DOM 表示整个 HTML 或 XML 文档。
节点：文档中的每个部分都是一个节点，包括元素节点、属性节点、文本节点等。
树结构：DOM 将文档表示为一个树结构，其中每个节点都是树的一部分。根节点通常是 <html> 元素。

DOM 树结构

一个简单的 HTML 文档：

<!DOCTYPE html>
<html>
  <head>
    <title>Document</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

对应的 DOM 树结构如下：

Document
  └── html
      ├── head
      │   └── title
      │       └── "Document"
      └── body
          ├── h1
          │   └── "Hello, World!"
          └── p
              └── "This is a paragraph."

DOM 节点类型

元素节点：表示 HTML 或 XML 元素，例如 <div>、<p> 等。
属性节点：表示元素的属性，例如 id、class 等。
文本节点：表示元素或属性中的文本内容。
注释节点：表示文档中的注释。
文档节点：表示整个文档。

常用的 DOM 操作

1. 访问节点

document.getElementById(id)：通过元素的 ID 获取元素。
document.getElementsByClassName(className)：通过类名获取元素集合。
document.getElementsByTagName(tagName)：通过标签名获取元素集合。
document.querySelector(selector)：通过 CSS 选择器获取第一个匹配的元素。
document.querySelectorAll(selector)：通过 CSS 选择器获取所有匹配的元素。

2. 创建和插入节点

document.createElement(tagName)：创建一个新的元素节点。
parentNode.appendChild(newNode)：将新节点添加为父节点的最后一个子节点。
parentNode.insertBefore(newNode, referenceNode)：在参考节点之前插入新节点。

3. 修改节点

element.innerHTML：设置或获取元素的 HTML 内容。
element.textContent：设置或获取元素的文本内容。
element.setAttribute(name, value)：设置元素的属性。
element.removeAttribute(name)：移除元素的属性。

4. 删除节点

parentNode.removeChild(childNode)：从父节点中移除子节点。

示例

以下是一个简单的示例，展示了如何使用 JavaScript 操作 DOM：

<!DOCTYPE html>
<html>
<head>
  <title>DOM Example</title>
</head>
<body>
  <div id="container">
    <p class="text">This is a paragraph.</p>
  </div>

  <script>
    // 访问节点
    const container = document.getElementById('container');
    const paragraph = document.querySelector('.text');

    // 创建和插入节点
    const newParagraph = document.createElement('p');
    newParagraph.textContent = 'This is a new paragraph.';
    container.appendChild(newParagraph);

    // 修改节点
    paragraph.textContent = 'This paragraph has been modified.';

    // 删除节点
    container.removeChild(paragraph);
  </script>
</body>
</html>