《JavaScript入门经典（第6版）》——1.6 DOM简介

本节书摘来自异步社区《javascript入门经典（第6版）》一书中的第1章，第1.6节，作者： 【美】 phil ballard 译者：李 军陈冀康，更多章节内容可以访问云栖社区“异步社区”公众号查看。

“文档对象模型”（document object model，dom）是对文档及其内容的抽象表示。

每次浏览器要加载和显示页面时，都需要解释（更专业的术语是“解析”）构成页面的html源代码。在解析过程中，浏览器建立一个内部模型来表示文档里的内容，这个模型就是dom。在浏览器渲染页面的可见内容时，就会引用这个模型。可以使用javascript来访问和编辑这个dom的各个部分，从而改变页面的显示内容和用户交互的方式。

在早期，javascript只能对web页面的某些部分进行最基本的访问，比如访问页面里的图像和表单。一个javascript程序所包含的语句，可以选择“页面上第二个表单”，或是“名称为registration的表单”。

web开发人员有时把这种情形称为0级dom，以便与w3c的1级dom向下兼容。0级dom有时也称为bom（浏览器对象模型）。从0级dom开始，w3c逐渐扩展和改善了dom规范。w3c更大的野心是不仅让dom能够用于web页面与javascript，也能用于任何编程语言和xml。

说明：本书使用1级和2级的w3c dom定义。

1.6.1　w3c和标准兼容

浏览器厂商在最近的版本中对dom的支持都有了很大的改善。在编写本书时，ie最新版本是11，netscape navigator以mozilla firefox重生（当前版本是35.0），其他竞争对手还包括opera、konqueror、苹果公司的safari、谷歌的chrome和chromium，它们都对dom提供了出色的支持。

web开发人员的处境有了很大改善。除了极特殊的一些情况，只要我们遵循dom标准，在编程时基本上可以不考虑为某个浏览器编写特殊代码了。

说明：早期的浏览器，比如netscape navigator（任何版本）和ie 5.5以前版本，现在基本上已经没有人使用了。本书只关注与1级或更高级别dom兼容的现代浏览器，比如ie 9+、firefox、google chrome、apple safari、opera和konqueror。我们建议读者把自己使用的浏览器升级到最新的较为稳定的版本。

1.6.2　window和document对象

浏览器每次加载和显示页面时，都在内存里创建页面及其全部元素的一个内部表示体系，也就是dom。在dom里，页面的元素具有一个逻辑化、层级化的结构，就像相互关联的父对象和子对象组成了一个树形的结构。这些对象及其相互关系构成了web页面及显示页面的浏览器的抽象模型。每个对象都有“属性”列表来描述它，而利用javascript可以使用一些方法来操作这些属性。

这个层级树的最顶端是浏览器window对象，它是页面的dom表示中的一切对象的父对象。

window对象具有一些子对象，如图1.1所示。图1.1中第一个子对象是document，这也是本书最经常使用的对象。浏览器加载的任何html页面都会创建一个document对象，包含全部html内容及其他构成页面显示的资源。利用javascript以父子对象的形式就可以访问这些信息。这些对象都具有自己的属性和方法。

图1.1中window对象的其他子对象还有location（包含着当前页面url的详细信息）、history（包含浏览器以前访问的页面地址）和navigator（包含浏览器类型、版本和兼容的信息）。第4章将会更详细地介绍这些对象，其他章节也会使用它们，但目前我们着重于document对象。

1.6.3　对象表示法

我们用句点方式表示树形结构里的对象：

如图1.1所示，location对象是window对象的子对象，所以在dom里就像这样表示它：

提示：这种表示法可以扩展任意多次，以表示树结构中的任何对象。例如

表示object3，其父对象是object2，而object2又是object1的子对象。

html页面的

部分在dom里是document对象的一个子对象，所以表示为：

window.document.body

这种表示法的最后一个部分除了可以是对象外，还可以是属性或方法：

举例来说，如果想访问当前文档的title属性，也就是html标签

和，我们可以这样表示：

注意：如果对象层次和句点表示法似乎现在对你来说还不是很清晰的话，不必为此担心。在本书中，你将会看到很多的示例。

提示：window对象永远包含当前浏览器窗口，所以使用window.document就可以访问当前文档。作为一种简化表示，使用document也能访问当前文档。

如果是打开了多个窗口，或是使用框架集，那么每个窗口或框架都有单独的window和document对象，为了访问其中的某一个文档，需要使用相应的窗口名称和文档名称。