DOM概述

前言

在现代网页开发中，动态交互是提升用户体验的关键；无论是实时更新的社交媒体动态，还是交互式的购物网站，这些背后的核心技术之一便是 DOM(文档对象模型)，它将静态的 HTML 文档转化为一种可以通过编程动态操作的结构，而 JavaScript 则是操作这一结构的强大工具；本文将带你从基础出发，探索 DOM 的定义、它与 JavaScript 的协作方式等

什么是 DOM

在学习 Web 开发的时候，我们经常能听到 BOM 和 DOM，BOM (Browser Object Model)就是浏览器对象模型；而 DOM (Document Object Model)即文档对象模型，它们都是 Web API，共同构成了浏览器中 JavaScript 操作网页的核心环境BOM 包含了 DOM，window对象是 BOM 的核心，而 DOM 是window对象的一部分简单地说，DOM就是 W3C 制定的一套接口规范；本质上，是一种编程接口，用于表示及操作 HTML 或 XML 文档浏览器获得一个结构化文档(如 HTML)后，会根据 DOM 模型，将其解析为一系列节点，每个节点都代表文档中的一部分，例如标签、属性或文本内容，再由这些节点组成一棵树状结构(DOM Tree)，简短地说，就是将静态的 HTML 文档结构化为可以被程序操作的对象，让开发者可以通过 JavaScript 动态修改页面内容和结构

作用

访问文档：通过 DOM，可以动态获取和修改页面上的内容
修改文档结构：可以添加、删除、移动或替换元素
处理事件：为页面元素绑定和响应用户交互事件(如点击、悬停等)

层次结构

从整体到局部的关系：

window：浏览器窗口，是全局对象
document：当前加载的文档，是 DOM 树的根节点
元素节点和其它节点形成树状关系

节点

在DOM中，节点是构成页面内容的基本单位，每个节点都代表了文档中的一部分，可以是元素、文本、属性或注释等
DOM 中的节点结构以树状形式表示，根节点为document，每个节点都是树的一个分支或叶子

常见类型

DOM 定义一系列不同的节点类型，其中最常用的节点类型包括元素节点、文本节点、属性节点等；每个节点都有自己的作用和特性，开发者可以通过 JavaScript 操作这些节点，以实现动态页面效果

文档节点

文档节点(Document Node)，代表整个 HTML 或 XML 文档本身，是 DOM 树的根节点如在浏览器中，document对象就是 DOM 树的文档节点，它提供了对整个页面的访问接口

文档类型节点

文档类型节点(DocumentType Node)，表示文档类型声明，例如这种节点通常在 HTML 或 XML 文档的开头

文档片段节点

文档片段节点(DocumentFragment Node)，是一种轻量级的Document对象，不是文档的一部分，但可以用来存储临时的 DOM 元素通常用来批量操作 DOM，避免频繁的页面重排，提高性能

元素节点

元素节点(Element Node)，表示 HTML 或 XML 中的元素标签例如：<div>,<p>,<ul>,<a>等；通过元素节点(对象)，可以修改标签的属性、添加子元素、删除元素等常见的获取方式有：

通过getElementById、querySelector等方法获取元素节点
或通过createElement创建节点

文本节点

文本节点(Text Node)，表示元素内的文本内容，是最常见的节点之一例如：<h1>Hello DOM</h1>中的Hello DOM就是一个文本节点

属性节点

属性节点(Attribute Node)，表示 HTML 元素的属性，如class、id、href等属性节点不是直接存在于 DOM 树中，但可以通过getAttribute()、setAttribute()等方法操作，有时，也可使用Element接口中的属性(如id、className)来操作属性

注释节点

注释节点(Comment Node)，表示 HTML 或 XML 文档中的注释内容例如：；其通常用于存储注释信息，可以通过createComment()创建

CDATA 节点

CDATA 节点(CDATA Node)，仅在 XML 文档中存在，用于包含不可解析的文本，主要用于防止字符被当作标签解析

节点树结构

在 DOM 中，节点是树状结构的组成部分，每个节点可以有多个子节点，而每个节点又有父节点文档节点(document)作为根节点，包含所有其他节点，节点之间通过父子关系、兄弟关系进行连接

父节点(Parent Node)：某个节点的上级节点
子节点(Child Node)：某个节点的下级节点
兄弟节点(Sibling Node)：同一父节点下的其他节点

根据其树状结构，DOM也相关的属性、方法来获取这些相关节点，如parentNode、childNodes、nextSibling等
例如：
假设有如下一个 HTML 文档

<html>
 <head>
   <title>DOM 树</title>
 </head>
 <body>
   <div>
     <p>这是一个段落</p>
   </div>
 </body>
</html>

其 DOM 结构可如下展示：

Document (根节点)
 └── html (文档元素节点)
     ├── head (头部元素节点)
         └── title (标题元素节点)
     └── body (主体元素节点)
         └── div (div元素节点)
             └── p (段落元素节点)

document

document是 DOM 的一个核心部分，代表浏览器中加载的整个 HTML 或 XML 文档，它是 JavaScript操作网页内容的入口点，通过document对象，我们可以访问和修改页面上的元素、结构、文本等
简而言之，document是与页面的 DOM 树直接交互的接口

总结

DOM是现代网页开发的核心，它将静态的 HTML 文档转化为一种可操作的对象模型，为 JavaScript 提供了操控页面的接口；通过理解 DOM 树的结构、节点类型以及 JavaScript 操作 DOM 的方法，我们不仅能够更高效地开发网页，还能为用户带来更流畅的使用体验

JavaScript与DOM的关系指南