【EASYDOM系列教程】之DOM 简介

Me_Kun 发布于2019-08-20 17:50 / 1448人阅读

摘要：最后表示，就是中表示各个对象之间的关系。的定义由于的标准规范是由组织起草并定义的，所以对的定义是目前最权威的解释。浏览器的支持目前几乎所有的浏览器都支持的内容。而组织定义的标准规范，主要也是为了解决在不同浏览器的差异问题。

DOM 是什么

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

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

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

我们之所以可以在 JavaScript 语言中使用 DOM，是因为各大浏览器将 DOM 的标准规范内容封装成了 JavaScript 语言所支持的形式。

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

DOM 的具体含义是什么

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

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

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

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

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

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 国际许可协议进行许可。

服务器托管专线服务系列之系列之二架构之坑系列一之新功能简介

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83906.html

【EASYDOM系列教程】之 DOM 元素树

摘要：元素之间的关系在元素树结构中，主要具有以下三层关系。祖先与后代如果我们将页面中某一个元素作为祖先的话，那包含在该元素内的所有元素除子级之外的都可以称为该元素的后代。兄弟关系具有相同父级元素的两个或几个元素之间就是兄弟关系。 DOM 元素树结构与 DOM 节点树结构很相似，区别仅在于是利用节点解析 HTML 元素，还是利用元素解析 HTML 元素。 DOM 树结构还记得下面这张图吗? ...

stormzhang 2019-08-21 12:00 评论0 收藏0
【EASYDOM系列教程】之DOM 树结构

摘要：简单来说，节点作为树结构中的连接点，最终构成了完整的树结构。节点树结构通过节点概念，我们可以将原本的树结构改成节点树结构进行表示。节点之间的关系中的表示模型，也可以用来表示节点树结构中节点之间的关系。值得注意的是和元素并不是兄弟关系。 DOM 树结构 DOM 之所以可以访问和更新 HTML 页面中的内容、结构和样式，是因为 DOM 将 HTML 页面解析为一个树结构。例如下面这段代...

nemo 2019-08-20 17:50 评论0 收藏0
【EASYDOM系列教程】之 Element 对象

摘要：而标准规范中提供了对象，主要是依靠元素树结构访问和更新页面的内容。值得注意的是所有的页面的元素都是对象，而这个对象又是继承于对象的。我们可以简单地理解对象是对象的补充。本教程采用知识共享署名非商业性使用禁止演绎国际许可协议进行许可。 DOM 的标准规范中提供了 Element 对象，该对象提供了 HTML 页面中所有元素所具有的属性和方法。我们都知道 DOM 标准规范中提供了 Nod...

jeyhan 2019-08-21 11:55 评论0 收藏0
【EASYDOM系列教程】之Node介绍

摘要：对象的作用树结构主要是依靠节点进行解析，称为节点树结构。对象的继承链关系对象是继承于对象的，是一个用于接收事件的对象。但需要注明作者及来源，并且不能用于商业。本教程采用知识共享署名非商业性使用禁止演绎国际许可协议进行许可。 DOM 的标准规范中提供了 Node 对象，该对象主要提供了用于解析 DOM 节点树结构的属性和方法。 Node 对象的作用 DOM 树结构主要是依靠节点进行解析，...

oliverhuang 2019-08-20 18:16 评论0 收藏0
【EASYDOM系列教程】之Document 对象介绍

摘要：对象的作用对象作为访问和更新页面内容的入口。这个结果充分地说明了对象在的标准规范中代表整个页面。对象的继承链对象是继承于对象的。对象也是的标准规范中非常重要的对象之一，而对象又是继承于对象。 Document 对象是 DOM 的标准规范中比较重要的对象之一。该对象提供了访问和更新 HTML 页面内容的属性和方法。 Document 对象的作用 Document 对象作为 DOM 访问和...

JiaXinYi 2019-08-21 11:48 评论0 收藏0