前端必知词汇:DOM

简介: DOM (Document Object Model,文档对象模型) ,是W3C制定的标准接口规范,是一种处理HTML和XML文件的标准API。DOM提供了对整个文档的访问模型,将文档作为一个树形结构,树的每个结点表示了一个HTML标签或标签内的文本项。DOM树结构精确地描述了HTML文档中标签间的相互关联性。将HTML或XML文档转化为DOM树的过程称为解析 (parse) 。HTML文档被解析后,转化为DOM树,因此对HTML文档的处理可以通过对DOM树的操作实现。

DOM (Document Object Model,文档对象模型) ,是W3C制定的标准接口规范,是一种处理HTML和XML文件的标准API。DOM提供了对整个文档的访问模型,将文档作为一个树形结构,树的每个结点表示了一个HTML标签或标签内的文本项。DOM树结构精确地描述了HTML文档中标签间的相互关联性。将HTML或XML文档转化为DOM树的过程称为解析 (parse)。HTML文档被解析后,转化为DOM树,因此对HTML文档的处理可以通过对DOM树的操作实现。

Document Object Model的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战” (browser wars) ,双方为了在JavaScript与JScript一决生死,于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物,有VBScript、ActiveX、以及微软的DHTML格式等,使不少网页使用非微软平台及浏览器无法正常显示。DOM即是当时酝酿出来的杰作。

DOM分为HTML DOM和XML DOM两种。它们分别定义了访问和操作HTML/XML文档的标准方法,并将对应的文档呈现为带有元素、属性和文本的树结构。DOM树结点的属性包括标记名 (node Name) 、结点类型 (node Type,取值为TagTxt) 、结点内容 (data) 、父结点对象集合 (parent Node) 、子结点对象集合 (first Child,last Child) 、兄弟结点对象集合 (previous Sibling,next Sibling) 等。

在应用过程中,基于DOM的HTML/XML分析器将一个HTML/XML文档转换成一棵DOM树,应用程序通过对DOM树的操作,来实现对HTML/XML文档数据的操作。Web页面的有效内容大多存在DOM树的叶结点中,DOM树中的其余结点主要用于表示内容分块及页面的外观特性。

资料来源:
维基百科词条: Browser Wars
[1] 基于DOM模型扩展的Web信息提取.中国知网

目录
相关文章
|
2月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
72 5
|
3月前
|
JavaScript 前端开发 编译器
吐血整理:纯前端如何实现批量dom转图片,并下载成压缩包
【10月更文挑战第2天】吐血整理:纯前端如何实现批量dom转图片,并下载成压缩包
76 2
|
4月前
|
前端开发 JavaScript
前端基础(七)_DOM元素获取(getElementById、getElementsByTagName、getElementsByClassName、querySelector等)
本文介绍了如何在前端通过不同的方法获取DOM元素,包括getElementById、getElementsByTagName、getElementsByClassName、querySelector和querySelectorAll。
213 3
|
4月前
|
XML 缓存 JavaScript
提升对前端的认知,不得不了解Web API的DOM和BOM
该文章强调了在前端开发中理解和掌握DOM(文档对象模型)和BOM(浏览器对象模型)的重要性,并介绍了它们的相关操作和应用。
提升对前端的认知,不得不了解Web API的DOM和BOM
|
4月前
|
JavaScript 前端开发
前端基础(十)_Dom自定义属性(带案例)
本文介绍了DOM自定义属性的概念和使用方法,并通过案例展示了如何使用自定义属性来控制多个列表项点击变色的独立状态。
64 0
前端基础(十)_Dom自定义属性(带案例)
|
3月前
|
JavaScript 前端开发 UED
【前端基础篇】JavaScript之DOM介绍2
【前端基础篇】JavaScript之DOM介绍
37 0
|
3月前
|
JavaScript 前端开发 搜索推荐
【前端基础篇】JavaScript之DOM介绍1
【前端基础篇】JavaScript之DOM介绍
51 0
|
4月前
|
JavaScript 前端开发
网页前端课程设计-【模仿】香港中文大学官网,轮播图及div+css布局,js的dom操作
这篇文章介绍了如何模仿香港中文大学官网进行网页前端课程设计,包括使用div+css布局、js的DOM操作以及实现轮播图等技术细节。
|
4月前
|
移动开发 前端开发 JavaScript
使用html-to-image代替html2canvas,结合jspdf实现下载pdf(下载截图下载前端dom元素)
本文介绍了在前端项目中,当使用`html2canvas`遇到问题时,如何使用`html-to-image`库作为替代方案,结合`jspdf`实现将DOM元素生成为PDF文件并提供下载。文章首先讨论了`html2canvas`可能遇到的问题,并提供了该库的使用示例代码。随后,详细介绍了`html-to-image`库的安装和使用方法,展示了如何将DOM元素转换为Canvas,再利用`jspdf`生成PDF文件。最后,文章通过示例代码说明了整个转换和下载的过程,并展示了效果截图。
252 0
|
5月前
|
JSON JavaScript 前端开发
JS的无限可能: 前端 精妙DOM技巧至Node.js的服务端
JS的无限可能: 前端 精妙DOM技巧至Node.js的服务端