DOM是什么_每个节点代表文档中的一个元素(如+<div>、<p>)、文本内容或属性(如+class、id)。-CSDN博客

本文链接：https://blog.csdn.net/m0_73903000/article/details/143394814

DOM（Document Object Model，文档对象模型）是HTML和XML文档的编程接口。它将文档解析为一个由节点和对象组成的结构，使得开发者可以通过编程语言（如JavaScript）来操作文档的内容、结构和样式。

DOM树（DOM Tree）

DOM树是DOM结构的一种表示方式，它将HTML或XML文档表示为一棵树形结构。树中的每个节点代表文档中的一个元素、属性或文本内容。DOM树的根节点是<html>元素，其他元素、文本节点、属性节点等都是它的后代节点。

DOM树的组成部分

文档节点（Document Node）：
- 整个文档的入口点，通常是document对象。
元素节点（Element Node）：
- 代表HTML或XML文档中的元素，如<div>、<p>、<a>等。
属性节点（Attribute Node）：
- 代表元素的属性，如class、id、href等。
文本节点（Text Node）：
- 代表元素中的文本内容。
注释节点（Comment Node）：
- 代表文档中的注释内容。

示例

以下是一个简单的HTML文档及其对应的DOM树结构：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>DOM树示例</title>
</head>
<body>
    <h1>欢迎来到DOM树示例</h1>
    <p>这是一个段落。</p>
    <ul>
        <li>列表项1</li>
        <li>列表项2</li>
    </ul>
</body>
</html>

DOM树结构

Document
    └── html (lang="zh-CN")
        ├── head
        │   ├── meta (charset="UTF-8")
        │   └── title
        │       └── "DOM树示例"
        └── body
            ├── h1
            │   └── "欢迎来到DOM树示例"
            ├── p
            │   └── "这是一个段落。"
            └── ul
                ├── li
                │   └── "列表项1"
                └── li
                    └── "列表项2"

解释

Document：根节点，代表整个文档。
html：文档的根元素，包含head和body两个子节点。
head：包含meta和title两个子节点。
meta：属性节点，包含charset属性。
title：包含文本节点"DOM树示例"。
body：包含h1、p和ul三个子节点。
h1：包含文本节点"欢迎来到DOM树示例"。
p：包含文本节点"这是一个段落。"。
ul：包含两个li子节点。
li：分别包含文本节点"列表项1"和"列表项2"。

使用JavaScript操作DOM

通过JavaScript，你可以访问和操作DOM树中的节点。以下是一些常见的操作：

// 获取元素
const titleElement = document.querySelector('title');
const h1Element = document.querySelector('h1');

// 修改元素内容
h1Element.textContent = '新的标题';

// 添加新元素
const newParagraph = document.createElement('p');
newParagraph.textContent = '这是新添加的段落。';
document.body.appendChild(newParagraph);

// 删除元素
const ulElement = document.querySelector('ul');
ulElement.removeChild(ulElement.firstElementChild);

通过理解DOM树的结构和使用JavaScript操作DOM，你可以动态地修改网页内容、结构和样式，实现丰富的交互效果。