JS基础DOM篇之一:何为DOM?

时间:2023-12-17 13:46:14
  近日在园子看了一篇文章,一位前端负责人问应聘者何为DOM事件流的三个阶段,我当时一看也是懵圈,于是强迫症复发,遂想要搞清楚它。谁知在查资料的过程中发现有好多关于DOM的概念也是模糊不清,便决定继续延伸,到最后发现辐射面实在太宽,适逢该版本项目已上线新需求未下得以有几日空闲,干脆一不做二不休从头搞起,在参考《JavaScript高级程序设计》的基础上,整理出这个系列。一来作为技术沉淀将来回顾方便;二来也希望能帮助到对这个点有困惑的园友,能力一般水平有限,不足之处还望诸位批评指正!

1.DOM是什么?  

用官方话说:(Document Object Model,简称DOM)文档对象模型,是针对XML但经过扩展用于HTML的标准编程接口。对于刚入门的小白来说这个解释可能太拗口。实际上就是在网页上,将页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标准模型。它把整个页面映射为一个多层节点结构。HTML或者XML页面中的每个组成部分都是DOM中某种类型的节点。这些节点又包含着不同类型的数据。神马啊?还是不清楚?那好办下面通过一段代码和它对应的树形结构直观的感受一下。

<html >
<head>
<title>文档标题</title>
</head>
<body>
<a href="#">我的链接</a>
<h1>我的标题</h1>
</body>
</html>

JS基础DOM篇之一:何为DOM?

  这样通过DOM创建的这个表示文档的树形图,开发人员就获得了控制页面内容和结构的主动权。借助DOM提供的API,开发人员就可以轻松自如的删除、添加、替换或修改任何节点。

2.为什么要使用DOM?

  话说当年在Internet Explorer 4和Netscape Navigator 4分别支持的不同形式的DHTML(Dynamic HTML)基础上,开发人员首次无需重新加载网页,就可以修改其外观和内容了。然而,DHTML在给Web技术发展带来巨大进步的同时,也带来了巨大的问题。由于Netscape和微软在开发DHTML方面各持己见,过去那个只编写一个HTML页面就能够在任何浏览器中运行的时代结束了。对开发人员而言,如果想继续保持Web跨平台的天性,就必须额外多做一些工作。而人们真正担心的是,如果不对Netscape和微软加以控制,Web开发领域就会出现技术上两强割据,浏览器互不兼容的局面。此时,负责制定Web通信标准的W3C(World Wide Web Consortium,万维网联盟)开始着手规划DOM。  

  但是得注意DOM并不只是针对JavaScript的,很多别的语言也都实现了DOM。不过,在Web浏览器中,基于ECMAScript实现的DOM的确已经成为JavaScript这门语言的一个重要组成部分。除了DOM核心和DOM HTML接口之外,另外几种语言还发布了只针对自己的DOM标准。下面列出的语言都是基于XML的,每种语言的DOM标准都添加了与特定语言相关的新方法和新接口:
  • SVG(Scalable Vector Graphic,可伸缩矢量图)1.0;
  • MathML(Mathematical Markup Language,数学标记语言)1.0;
  • SMIL(Synchronized Multimedia Integration Language,同步多媒体集成语言)。

  还有一些语言也开发了自己的DOM实现,例如Mozilla的XUL(XML User Interface Language,XML用户界面语言)。但是,只有上面列出的几种语言是W3C的推荐标准。

3. Web浏览器对DOM的支持

  在DOM标准出现了一段时间之后,Web浏览器才开始实现它。微软在IE5中首次尝试实现DOM,但直到IE5.5才算是真正支持DOM1级。在随后的IE6和IE7中,微软都没有引入新的DOM功能,而到了IE8才对以前DOM实现中的bug进行了修复。Netscape直到Netscape 6(Mozilla 0.6.0)才开始支持DOM。在Netscape 7之后,Mozilla把开发重心转向了Firefox浏览器。Firefox 3完全支持DOM1级,几乎完全支持DOM2级,甚至还支持DOM3级的一部分。(Mozilla开发团队的目标是构建与标准100%兼容的浏览器,而他们的努力也得到了回报。)  

  目前,支持DOM已经成为浏览器开发商的首要目标,主流浏览器每次发布新版本都会改进对DOM的支持。