DOM初识

最新推荐文章于 2025-08-12 15:05:40 发布

原创最新推荐文章于 2025-08-12 15:05:40 发布 · 389 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html

前端之javascript 专栏收录该内容

1 篇文章

订阅专栏

文档对象模型（DOM）

文档对象模型（DOM，Document Object Model）是用于 HTML 的应用程序编程接口（API），它把整个页面映射为一个多层节点结构。HTML 页面中的每个组成部分都是某种类型的节点，这些节点又包含着不同类型的数据。看下面这个 HTML 页面：

<html>
    <head>
        <title>Simple Page</title>
    </head>
    <body>
        <p>Hello World!</p>
    </body>
</html>

通过 DOM 创建的这个表示文档的树形图，开发人员获得了控制页面内容和结构的主动权。借助 DOM 提供的 API，开发人员可以轻松自如地删除、添加、替换或修改任何节点。

DOM1 级：

DOM 核心：映射文档结构，简化对文档中任意部分的操作和访问。 DOM HTML：在 DOM 核心的基础上，添加了针对 HTML
的对象和方法。

DOM2 级：

DOM 视图：定义了跟踪不同文档视图的接口。
DOM 样式：定义了基于 CSS伪元素应用样式的接口。
DOM 遍历和范围：定义了遍历和操作文档树的接口。

DOM3 级：

DOM 加载和保存：引入了以统一方式加载和保存文档的方法。
DOM 验证：新增了验证文档的方法。 DOM 核心扩展。

浏览器对象模型（BOM）

浏览器对象模型（BOM，Browser Object Model）是用于浏览器的应用程序编程接口（API），它把整个浏览器窗口映射为一个对象。从根本上讲，BOM 只处理浏览器窗口和框架，但人们习惯上也把所有针对浏览器的 JavaScript 扩展算作 BOM 的一部分，例如：

弹出新浏览器窗口的功能。移动、缩放和关闭浏览器窗口的功能。提供浏览器详细信息的 navigator 对象。
提供浏览器所加载页面的详细信息的 localtion 对象。提供用户显示器分辨率详细信息的 screen 对象。对 cookies
的支持。 XMLHttpRequest 和 IE 的 ActiveXObject 这样的自定义对象。

BOM 最让人头疼的是没有相关的规范和标准，每个浏览器都有独有的实现，这个问题在 HTML5 中得到了解决，HTML5 致力于把很多 BOM 功能写入正式规范。

小结

JavaScript 是一种专为网页交互而设计的脚本语言，由下列3个不同的部分组成：

核心（ECMAScript），由 ECMA-262 定义，提供核心语言功能。
文档对象模型（DOM），提供访问和操作网页内容的方法和接口。
浏览器对象模型（BOM），提供与浏览器交互的方法和接口。

JavaScript 的这3个组成部分，在当前5个主要浏览器（IE、FireFox、Chrome、Safari 和 Opera）中都得到了不同程度的支持。其中，所有浏览器对 ECMAScript 3 版本的支持大体上都还不错，而对 ECMAScript 5 的支持程度越来越高，但对 DOM 的支持则彼此相差比较多。对于已经正式纳入 HTML5 标准的 BOM 来说，尽管各浏览器都实现了某些众所周知的共同特性，但其他特性还是会因浏览器而异。