【小白入门前端】DOM、DOM树和DOM对象

最新推荐文章于 2025-07-14 08:50:29 发布

原创最新推荐文章于 2025-07-14 08:50:29 发布 · 1.2k 阅读 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

Mimany

关注

标签

#前端 #javascript

分类前端开发

前端JavaScript 专栏收录该内容

2 篇文章

订阅专栏

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

一、DOM

1、DOM定义

2、DOM作用

二、DOM树

1、DOM树定义

2、DOM树作用

三、DOM对象

1、定义

2、作用

四、总结

前言

理解DOM

“W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”

一、DOM

1、定义

（1）菜鸟：

DOM (Document Object Model) 译为文档对象模型，是 HTML 和 XML 文档的编程接口。

HTML DOM 定义了访问和操作 HTML 文档的标准方法。

DOM 以树结构表达 HTML 文档。

（2）MDN

文档对象模型（DOM）是 web 上构成文档结构和内容的对象的数据表示。

文档对象模型（DOM）是一个网络文档的编程接口。它代表页面，以便程序可以改变文档的结构、风格和内容。DOM将文档表示为节点和对象；这样，编程语言就可以与页面交互。

网页是一个既可以在浏览器窗口中显示，也可以作为 HTML 源代码的文档。在这两种情况下，它都是同一个文档，但文档对象模型（DOM）的表示方式使它可以被操作。作为一个面向对象的网页表示，它可以用脚本语言（如 JavaScript）进行修改。

（3）百度

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格(HTMl和XML文档是通过说明部分定义的)。文档可以进一步被处理，处理的结果可以加入到当前的页面。DOM是一种基于树的API文档，它要求在处理过程中整个文档都表示在存储器中。

简单说，DOM 是浏览器将网页（HTML）转换成的“编程接口”。DOM 像是一个“翻译官”，把 HTML 代码变成 JavaScript 能操作的东西。

2、作用

通过DOM，JavaScript 可以动态修改网页的内容、结构或样式（比如添加/删除元素、改变文字颜色等）。

二、DOM树

1、定义

（1）菜鸟

HTML DOM 树形结构:
DOM HTML tree
在这里插入图片描述

（2）MDN

DOM 树是一种树状结构，其节点代表 HTML 或 XML 文档内容。每一个 HTML 或 XML 文档都有其 DOM 树表示方法。例如，考虑如下文档：

<html lang="en">
  <head>
    <title>My Document</title>
  </head>
  <body>
    <h1>Header</h1>
    <p>Paragraph</p>
  </body>
</html>

其 DOM 树类似于这样：
在这里插入图片描述

（3）百度

根据W3C的定义，DOM树结点的属性包括标记名(nodeName)、结点类型(node Type，取值为TagTxt)、结点内容(data)、父结点对象集合(parent Node)、子结点对象集合(firstChild，lastChild)、兄弟结点对象集合(previous Sibling，nextSibling)等。DOM树结点的这些属性给出了页面的基本内容和结构信息，但不能反映标签、属性以及内容等与主题的相关程度，因而缺乏主题提取所需的语义。对DOM树扩展的总体思路为:考虑HTML页面标签的类别，以及标签属性值对页面主题信息的影响，将这种影响纳入对页面内容要素的计算中，对DOM树结点进行语义扩展，同时引入结点影响度因子来刻画该结点在树中的重要程度。

作用

1、结构化表示网页：将HTML的标签、属性、文本等内容组织成清晰的层级关系，方便程序理解和操作。
2、快速查找和访问元素：通过父子、兄弟等节点关系，JavaScript可以高效地定位到某个特定元素（比如“找到第二个<p>标签”）。
3、动态更新网页：当JavaScript修改DOM树（如添加、删除节点），浏览器会立即重新渲染页面，实现动态效果。

三、DOM对象

DOM 树中的每个部分（标签、属性、文本等）都被包装成一个对象（JavaScript 可以操作的东西）。

// 获取 <h1> 标签对应的 DOM 对象
let heading = document.querySelector("h1");
heading.textContent = "新标题"; // 用 JavaScript 修改文字

这里的 heading 就是一个 DOM 对象，代表网页中的 <h1>。
特点：DOM 对象有属性和方法（比如 .textContent、.style.color），用来操作对应的网页元素。

总结：

DOM：让 JavaScript 能操作网页的“桥梁”。

DOM 树：网页的树形结构表示。

DOM 对象：树中每个节点的具体操作接口。

概念	作用
DOM树	结构化表示网页，方便JavaScript查找和操作元素。
DOM对象	提供属性和方法，让JavaScript能直接修改内容、样式或绑定交互事件。

一句话：浏览器把 HTML 变成 DOM 树，树上的每个节点都是 DOM 对象，JavaScript 通过它们控制网页。