【EASYDOM系列教程】之DOM 简介

时间 2019-11-05

标签 EASYDOM系列教程 dom 简介栏目 HTML 繁體版

原文原文链接

DOM 是什么

DOM 被设计用于解析 HTML 页面文档，方便 JavaScript 语言经过 DOM 访问和操做 HTML 页面中的内容。javascript

DOM 是由 W3C 组织定义标准规范，而且由各大浏览器厂商支持。严格意义上来说，DOM 并不是属于 JavaScript 语言。前端

在其余开发语言中，也支持 DOM 的标准规范，例如 PHP 语言。java

咱们之因此能够在 JavaScript 语言中使用 DOM，是由于各大浏览器将 DOM 的标准规范内容封装成了 JavaScript 语言所支持的形式。浏览器

对于 DOM 中的对象，咱们只有调用的权限，没有修改的权限，也说明了这个问题。学习

DOM 的具体含义是什么

DOM 实际上是个缩写，全称是 Document Object Model，被译为 文档对象模型。spa

其中 D 表示 Document，就是 DOM 将 HTML 页面解析为一个文档。同时提供了 document 对象。翻译

其次 O 表示 Object，就是 DOM 将 HTML 页面中每一个元素解析为一个对象。例如 <body> 元素在 DOM 中对应就是 HTMLBodyElement 对象。设计

最后 M 表示 Model，就是 DOM 中表示各个对象之间的关系。3d

模型（Model）主要是指 DOM 树结构。code

DOM 是如何解析 HTML 页面的呢

浏览器加载并运行 HTML 页面后，会建立 DOM 结构。因为 DOM 中的内容被封装成了 JavaScript 语言中的对象，因此咱们可使用 JavaScript 语言经过 DOM 结构来访问和操做 HTML 页面中的内容。

换句话讲，DOM 能够理解为是 HTML 页面与 JavaScript 语言之间的一个桥梁。

DOM 的定义

因为 DOM 的标准规范是由 W3C 组织起草并定义的，因此 W3C 对 DOM 的定义是目前最权威的解释。

下面这段英文描述，就是 W3C 对 DOM 的定义原文:

The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents. The document can be further processed and the results of that processing can be incorporated back into the presented page.

下面这段是本人的翻译（仅供参考）:

DOM 是一个独立于任何语言和平台的接口，容许任何语言或脚本动态地访问和更新 HTML 文档的内容、结构和样式。该 HTML 页面能够进一步处理，而且该处理的结果能够被合并到所呈现的 HTML 页面中。

DOM 标准是独立的

经过 W3C 的定义，咱们能够知道 DOM 是不属于任何开发语言的。固然，DOM 也不会属于 JavaScript 语言。

任何一个开发语言，只要支持了 DOM 的标准规范，均可以经过 DOM 访问和操做 HTML 页面。

换句话讲，DOM 在不一样开发语言中，有着不一样的使用形式。但最核心的标准规范都是同样的，只是具体使用的开发语言的语法不一样而已。

好比下面这段代码，就是 JavaScript 中的 DOM 内容:

var btn = document.getElementById('btn');
var className = btn.className;
className += ' animate';
btn.className = className;

DOM 的做用

经过 W3C 的定义，咱们还能够知道 DOM 主要是用来解析 HTML 页面的。也就是只要支持 DOM 的标准规范的开发语言，均可以经过 DOM 访问和更新 HTML 页面的内容、结构和样式。

早期的 DOM 除了能够访问和更新 HTML 页面外，还能够访问和更新 XML 文档。但目前 XML 文档的使用场景愈来愈少，再加上 Web 前端开发需求愈来愈多。致使 DOM 主要用来访问和更新 HTML 页面了。

浏览器的支持

目前几乎全部的浏览器都支持 DOM 的内容。可是不是支持的是 W3C 对 DOM 的标准规范呢？

浏览器和 W3C 谁更早

浏览器对 DOM 的支持远早于 W3C 定义 DOM 的标准规范。也就是说，在 W3C 定义 DOM 的标准规范以前，各大浏览器就支持了 DOM。

最先，是 Navigator 浏览器支持 DOM。但只是提供了 Document 对象的一些属性和方法。

后期，IE 浏览器也加入了对 DOM 的支持。但 IE 浏览器与 Navigator 浏览器所支持的 DOM 是有区别的。

这也是 DOM 在不一样浏览器中的兼容问题。

而 W3C 组织定义 DOM 的标准规范，主要也是为了解决 DOM 在不一样浏览器的差别问题。

虽然，自从 W3C 定义了 DOM 的标准规范后，浏览器的兼容问题好了不少。但，各大浏览器都或多或少地扩展了 W3C 定义的 DOM 标准。

在实际开发中，尽可能使用 W3C 的 DOM 标准规范，以免更多的浏览器兼容问题。

本教程免费开源，任何人均可以避免费学习、分享，甚至能够进行修改。但须要注明做者及来源，而且不能用于商业。

本教程采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。