html DOM简介

更新日期: 2019-08-18 阅读: 2.8k 标签: dom

今天我们将了解WEB编程中一个重要的概念dom(Document Object Model)文档对象模型,它帮助我们使用JavaScript(或其他编程语言)操纵文档。


一   DOM是什么

DOM是html和XML文档的编程接口。它不同于把html源码在浏览器窗口当做页面或使用文本编辑器当做纯文本展示,它是对文档的另一种结构化的表述。DOM把文档的所有节点都解析为一个对象,并提供了一些属性和方法来描述它们。

DOM是W3C的标准。它被分为3个部分:

核心DOM:针对任何结构化文档的标准模型
XML DOM:针对XML文档的标准模型
HTML DOM:针对HTML文档的标准模型

DOM不是一种编程语言,它是一种标准,一个模型,它与编程语言相对独立。编程语言都可以按照这种模型实现对文档的访问和处理。

注:因为我们主要是学习WEB编程,所以接下来文章中即将提到的DOM均指HTML DOM,使用到的DOM api也均是JavaScript脚本语言实现。


二       DOM的访问

我们知道,各个浏览器对JavaScript都有不同的实现,所以它们在实现DOM标准时,也会有一些差异,但它们既然都遵循了该标准,所以又呈现出了不同程度一致性。所以我们在使用DOM时,并不需要做任何特别的操作,如果碰到有差异的地方(主要体现在方法名称和参数上),只需根据不同浏览器使用他们各自实现的相关方法即可。实际上他们的实现都遵循了统一标准。

DOM把文档视做树结构:

整个文档是一个文档节点

每个 HTML 标签是一个元素节点

包含在 HTML 元素中的文本是文本节点

每一个 HTML 属性是一个属性节点

注释属于注释节点


通过这个节点树,JavaScript可以轻松的访问并操作这些节点。


三      DOM节点类型

每个节点对象有都有一个nodeType,nodeName和nodeValue属性,通过这几个属性的值,我们可以获取该节点的相关信息:

节点类型nodeName 返回nodeValue 返回
1Element元素名null
2Attr属性名称属性值
3Text#text节点的内容
4CDATASection#cdata-section节点的内容
5EntityReference实体引用名称null
6Entity实体名称null
7ProcessingInstructiontarget节点的内容
8Comment#comment注释文本
9Document#documentnull
10DocumentType文档类型名称null
11DocumentFragment#document 片段null
12Notation符号名称null

 

四   DOM分级

 一级DOM

1级DOM在1998年10月份成为W3C的提议,由DOM核心与DOM HTML两个模块组成。DOM核心能映射以XML为基础的文档结构,允许获取和操作文档的任意部分。DOM HTML通过添加HTML专用的对象与函数对DOM核心进行了扩展。

 二级DOM

2级DOM在一级DOM的基础上进行了扩展,它引进了几个新DOM模块来处理新的接口类型:

DOM视图:描述跟踪一个文档的各种视图(使用css样式设计文档前后)的接口;

DOM事件:描述事件接口;

DOM样式:描述处理基于CSS样式的接口;

DOM遍历与范围:描述遍历和操作文档树的接口;

 三级DOM

3级DOM通过引入统一方式载入和保存文档和文档验证方法对DOM进行进一步扩展,DOM3包含一个名为“DOM载入与保存”的新模块,DOM核心扩展后可支持XML1.0的所有内容,包括XML Infoset、 XPath、和XML Base。


本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!

链接: https://fly63.com/article/detial/4800

相关推荐

全面理解虚拟DOM,实现虚拟DOM

DOM是很慢的,其元素非常庞大,页面的性能问题鲜有由JS引起的,大部分都是由DOM操作引起的。虚拟的DOM的核心思想是:对复杂的文档DOM结构,提供一种方便的工具,进行最小化地DOM操作。

js实现DOM遍历_遍历dom树节点方法

遍历DOM节点常用一般用节点的 childNodes, firstChild, lastChild, nodeType, nodeName, nodeValue属性。在获取节点nodeValue时要注意,元素节点的子文本节点的nodeValue才是元素节点中文本的内容。

vue中使用ref获取dom对象

本文适用于所有使用 Vue 的开发人, 包括初学者。在阅读本文之前,你应该具备一些前提条件:Node.js 10.x或更高版本。在终端或命令提示符下运行 node -v 来验证你的版本;npm 6.7 或以上版本;代码编辑器;我强烈推荐 Visual Studio Code

vuejs2.0如何获取dom元素自定义属性值

设置定义属性值 :data-value=.., 2.直接获取 3.通过this.$refs.***获取 1.目标DOM定义ref值: 2.通过 【this.$refs.***.属性名】 获取相关属性的值: this.$refs.*** 获取到对应的元素 ...

getHTML() - 替代 innerHTML 的最佳方法

getHTML()为开发者提供了一种强大的方法来处理包含Shadow DOM的复杂DOM结构。虽然它有一些限制,但在处理现代Web组件和复杂UI时,getHTML()的优势是显而易见的。随着Web组件的普及,掌握getHTML()将成为前端开发者的重要技能。

HTML文档解析和DOM树的构建

浏览器解析HTML文档生成DOM树的过程,以下是一段HTML代码,以此为例来分析解析HTML文档的原理.解析HTML文档构建DOM树的理解过程可分为两个主要模块构成,即标签解析、DOM树构建

原生js获取DOM对象的几种方法

javascript获取DOM对象的多种方法:通过id获取 、通过class获取、通过标签名获取、通过name属性获取、通过querySelector获取、通过querySelectorAll获取等

关于DOM操作是异步的还是同步的相关理解

先列出我的理解,然后再从具体的例子中说明:DOM操作本身应该是同步的(当然,我说的是单纯的DOM操作,不考虑ajax请求后渲染等);DOM操作之后导致的渲染等是异步的(在DOM操作简单的情况下,是难以察觉的)

详解 HTML attribute 和 DOM property

在大多数的文章中,attribute 一般被翻译为“特性”,property 被译为“属性”。把结论写在最前面,如果你全都懂,后面就不用看了。当我们书写 HTML 代码的时候

JavaScript DOM事件模型

早期由于浏览器厂商对于浏览器市场的争夺,各家浏览器厂商对同一功能的JavaScript的实现都不进相同,本节内容介绍JavaScript的DOM事件模型及事件处理程序的分类。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!