JS基础DOM篇之一：何为DOM？

　　近日在园子看了一篇文章，一位前端负责人问应聘者何为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>

　　这样通过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的支持。
posted @ 2016-12-22 11:07  四水一木刃  阅读(442)  评论(0)  编辑  收藏  举报