很啰嗦，再次总结 DOM

读心悦

于 2025-05-17 23:30:17 发布

阅读量1k

点赞数 7

分类专栏： JavaScript进阶知识文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/xuelian3015/article/details/148035823

版权

DOM (文档对象模型) 详解

一、DOM 基础概念

1. 定义与作用

DOM（Document Object Model）即文档对象模型，是一种用于 HTML 和 XML 文档的编程接口。它将文档解析为一个由节点和对象组成的树状结构，允许程序和脚本动态访问、修改文档的内容、结构和样式。

2. 核心特点

树形结构：DOM 将文档表示为节点树，每个节点可以有子节点。
平台和语言无关：DOM 可以被任何编程语言访问，如 JavaScript、Python 等。
动态交互：通过 DOM，程序可以实时改变文档的内容和结构。

3. 节点类型

DOM 树中的节点主要分为以下几种类型：

元素节点（Element Node）：表示 HTML 元素，如 <div>、<p> 等。
文本节点（Text Node）：表示元素内的文本内容。
属性节点（Attribute Node）：表示元素的属性，如 id、class 等。
文档节点（Document Node）：表示整个文档，是 DOM 树的根节点。
注释节点（Comment Node）：表示 HTML 中的注释。

二、DOM 树结构

1. 节点关系

父节点（Parent Node）：每个节点（除根节点外）都有一个父节点。
子节点（Child Node）：一个节点可以有零个或多个子节点。
兄弟节点（Sibling Node）：共享同一个父节点的节点互为兄弟节点。
祖先节点（Ancestor Node）：父节点的父节点，依此类推。
后代节点（Descendant Node）：子节点的子节点，依此类推。

2. 示例 HTML 与 DOM 树

<!DOCTYPE html>
<html>
<head>
  <title>DOM 示例</title>
</head>
<body>
  <div id="container">
    <h1>Hello, DOM!</h1>
    <p class="content">这是一个 <a href="#">DOM 示例</a>。</p>
  </div>
</body>
</html>

对应的简化 DOM 树结构：

Document
└── html (Element)
    ├── head (Element)
    │   └── title (Element)
    │       └── "DOM 示例" (Text)
    └── body (Element)
        └── div (Element, id="container")
            ├── h1 (Element)
            │   └── "Hello, DOM!" (Text)
            └── p (Element, class="content")
                ├── "这是一个 " (Text)
                └── a (Element, href="#")
                    └── "DOM 示例" (Text)
                └── "。" (Text)

三、JavaScript 中的 DOM 操作

1. 访问 DOM 元素

通过 ID 访问

const element = document.getElementById('container');

通过标签名访问

const paragraphs = document.getElementsByTagName('p');
// 返回 HTMLCollection 对象

通过类名访问

const elements = document.getElementsByClassName('content');
// 返回 HTMLCollection 对象

通过选择器访问

const element = document.querySelector('#container p');
// 返回匹配的第一个元素

const elements = document.querySelectorAll('p.content');
// 返回 NodeList 对象

2. 操作元素内容

修改文本内容

const head

最低0.47元/天解锁文章