JavaScript学习笔记:初识JavaScript的DOM

JavaScript知识一直都是自己的短板,近一年多来一直在致力于增加这方面的能力,也在W3cplus梳理了一些有关于自己学习JavaScript的笔记。加上最近学习Vue相关的技能,越发自己在JavaScript方面的能力还欠缺很多,所以这段时间一直在补习JavaScript中DOM相关的知识。希望对于初学者有所帮助。

什么是DOM

MDN上对DOM是这样描述的:

DOM(文档对象模型)是HTML和XML文档的编程接口。它提供了对文档的结构化的表述,并定义一种方式可以使从程序中对该结构进行访问,从而改变文档的结构、样式和内容。DOM将文档解析为一个由节点和对象(包含属性和方法的对象)组成的结构集合。

简单地说,DOM是一套对文档的内容进行抽象和概念化的方法

文档对象模型针对的是一份文档,加上各个浏览器渲染Web页面的具体方法略有不同,那么相同的一份代码在不同的浏览器中便会有冲突不断。为了让DOM更具标准化,DOM也被纳入W3C标准。在W3C的标准中,DOM是独立于平台和语言的一种接口,它允许程序和脚本动态的访问更新文档的结构、样式和内容。也就有了后面的内容,即DOM的

DOM的地位

众所周知,对于一个Web页面或者Web应用程序,他由三部分组成:HTMLCSSJavaScript

如果把一个Web页比作一套房子,那么房子的格局就是我们所说的HTML,而房子的装修就是CSS,对于房子中的门怎么开,灯怎么操作就是JavaScript。而其中的JavaScript赋予了Web页面的行为,通过它可以与页面进行交互,实现页面的动画效果等等。也就是说,要实现页面的动态交互和效果,操作HTML才是核心。事实上操作HTML其实就是对DOM的操作。DOM给我们提供了用程序来动态控制HTML的接口,也就是早期的DHTML的概念。因此,DOM处在JavaScript赋予HTML具备动态交互和效果的能力的核心地位上

在Web中,JavaScript和DOM经常是作为一个整体出现,因为JavaScript通常都是用来进行DOM操作和交互的。

具体怎么操作和交互,我们放到后续来介绍。

DOM的发展史

Web中的DOM发展到目前为止经历了DOM0、DOM1、DOM2和DOM3几个版本。而每个版本都略有差异。

DOM0

JavaScript在早期版本中提供了查询和操作Web文档内容的API,比如图像和表单。而这个阶段的DOM实际上还未成为W3C标准的初级阶段。现在习惯上被称为DOM0

DOM1

在1998年10月份时,DOM成为W3C推荐标准。W3C将DOM定义为一个与平台和编程语言无关的接口,通过这个接口程序和脚本可以动态的访问和修改文档的内容、结构和样式。

DOM1主要定义了HTML和XML文档的底层结构。而且这个阶段的DOM由两个模块组成: DOM核心DOM HTML。其中, DOM核心规定了基于XML的文档结构标准,通过这个标准简化了对文档中任意部分的访问和操作。DOM HTML则在DOM核心的基础上加以扩展,添加了针对HTML的对象和方法,如JavaScript中的Document对象。

DOM2

DOM2在DOM1的基础上增强了更多的交互能力,也支持更高级的XML特性。DOM2将DOM分为更多具有联系的模块。DOM2级在原来的DOM基础上又扩充了鼠标、用户界面事件、范围、遍历等细分模块,而且通过对象接口增加了对CSS的支持。

在DOM2中引入了下列模块,在模块中包含了众多新类型和新接口:

  • DOM视图(DOM Views):定义了跟踪不同文档视图的接口
  • DOM事件(DOM Events):定义了事件和事件处理的接口
  • DOM样式(DOM Styles):定义了基于CSS为元素应用样式的接口
  • DOM遍历和范围(DOM Traversal and Range):定义了遍历和操作文档树的接口

完整的DOM2标准如下图所示:

DOM3

DOM3再一次的扩展了DOM,引入了以统一方式加载和保存文档的方法,它在DOM Load And Save这个模块中定义;同时新增了验证文档的方法,是在DOM Validation这个模块中定义的。在DOM3中引入了以下模块:

  • DOM加载和保存模块(DOM Load and Save):引入了以统一方式加载和保存文档的方法
  • DOM验证模块(DOM Validation):定义了验证文档的方法
  • DOM核心的扩展(DOM Styles):支持XML1.0规范,涉及到XML Infoset、XPath和XML Base

认识DOM

前面我们对DOM做了一些初步的介绍,大家或许对DOM的抽象概念有了一定的了解,但对于初学者而言,对于DOM的理解还只停留在理论与概念上,要说到具体的操作或者说灵活的控制DOM,还是无法做到的。那么接下来,我们以代码为例,结合DOM的一些概念来强化初学者对DOM的认识,同时也是为后面的内容做技术准备。

DOM中的O

通过前面的内容,我们知道DOM(Document Object Model)指的是文档对象模型。基中D(Document)可以理解为整个Web加载的页面文档,O(Object)可以理解为类似window对象只读的东西,可以调用属性和方法,这里我们说的是document对象,M(Model)可以理解为Web页面文档的树形结构。

这里我们主要说的是这个O,也就是Object,即对象。在JavaScript中,对象是这样的一个概念:

对象:就是由一些属性和方法组合在一起而构成的一个数据实体。

JavaScript中的对象主要可分为三种类型:

  • 用户定义对象(User-Defined Object):由程序员自行创建的对象
  • 内建对象(Native Object):内建在JavaScript语言里的对象,如ArrayMathDate
  • 宿主对象(Host Object):由浏览器提供的对象,如windowdocument

其中第三种宿主对象是我们要讨论的重点,这主要是因为JavaScript是一种解释型语言,所以必须依赖运行于一个宿主环境中,那么客户端JavaScript一

剩余70%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/javascript/intro-dom.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部