《JavaScript入门经典(第6版)》——1.6 DOM简介

1.6 DOM简介

“文档对象模型”(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 对象表示法
我们用句点方式表示树形结构里的对象:

parent.child

如图1.1所示,location对象是window对象的子对象,所以在DOM里就像这样表示它:

window.location

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

object1.object2.object3

表示object3,其父对象是object2,而object2又是object1的子对象。
HTML页面的

部分在DOM里是document对象的一个子对象,所以表示为:

window.document.body
这种表示法的最后一个部分除了可以是对象外,还可以是属性或方法:

object1.object2.property
object1.object2.method

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

和,我们可以这样表示:

window.document.title

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

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

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

时间: 2025-01-19 07:00:00

《JavaScript入门经典(第6版)》——1.6 DOM简介的相关文章

《JavaScript入门经典(第6版)》——第1章 JavaScript简介 1.1 Web脚本编程基础

第1章 JavaScript简介 JavaScript入门经典(第6版) 本章主要内容包括: 服务器端和客户端编程 JavaScript如何改善Web页面 JavaScript的历史 文档对象模型(DOM)基础知识 window和document对象 如何使用JavaScript给Web页面添加内容 如何利用对话框提示用户 与只有文本内容的祖先相比,现代的Web几乎是完全不同的,它包含了声音.视频.动画.交互导航等很多元素,而JavaScript对于实现这些功能扮演了非常重要的角色. 在第1章中

《JavaScript入门经典(第6版)》——第2章 创建简单的脚本2.1 在Web页面里添加JavaScript

第2章 创建简单的脚本 JavaScript入门经典(第6版)本章主要内容包括: 在Web页面里添加JavaScript的各种方式JavaScript语句的基本语法声明和使用变量使用算术操作符代码的注释捕获鼠标事件第1章介绍了JavaScript是一种能够让Web页面更具有交互性的脚本语言. 本章将介绍如何向Web页面添加JavaScript,以及编写JavaScript程序的一些基本语法,比如语句.变量.操作符和注释.同时,本章将涉及更加实用的脚本范例. 2.1 在Web页面里添加JavaSc

《Android游戏编程入门经典》——第1章Android 4简介

第1部分 简介Android游戏编程入门经典第1章 Android 4简介第2章 安装开发工具第3章 使用Android SDK配置NetBeans和Eclipse第4章 创建第一个Android程序 第1章 Android 4简介Android游戏编程入门经典本章介绍如下内容: Android 4的新功能:Android平台的历史:Android硬件规格:开发系统要求.本书前4章都是非常实用的入门教程,介绍使用两种开发环境(NetBeans和Eclipse)设置Android SDK的步骤.我

《JavaScript入门经典(第6版)》——1.10 作业

1.10 作业 请先回答问题,再参考后面的答案. 1.10.1 测验1.JavaScript是解释型语言还是编译型语言? a.编译型语言 b.解释型语言 c.都不是 d.都是 2.若要添加JavaScript语句,必须在HTML页面里使用什么标签? a.< script>和< /script> b.< type="text/javascript"> c.< !--和--> 3.DOM层级结构的最顶层是: a.document属性 b.do

《Android游戏编程入门经典》——1.3节Android NDK简介

1.3 Android NDK简介 Android游戏编程入门经典 Android NDK(与SDK不同)支持您以本机C++代码而非Java语言编写应用程序或游戏的组件.NDK是一个单独的工具,可在Android SDK安装以后再安装它.NDK不允许以C++语言编写整个应用程序或游戏.更确切地说,它用来补充SDK,支持C++代码和库,并旨在充当许多没有Java库的硬件设备的桥梁.我们可以使用NDK优化游戏代码.除了许多C++库外,NDK还支持实现3D渲染的OpenGL ES 2.0.针对音频的O

《Android游戏编程入门经典》——1.1节Android 4简介

1.1 Android 4简介Android游戏编程入门经典最令人惊奇的是,仅用了3年时间,Android就发展成为智能手机市场中强有力的竞争者.从提出构想到发布版本仅用了3年时间,这是一项了不起的壮举.之所以如此是有原因的:Android是以Linux core 3.0为基础构建的.是的,Android实际上是Linux操作系统的衍生物. 鉴于Android比Apple晚两年进入市场,因此,可以说Android在与Apple的明星产品iPhone的竞争中获得了成功.Microsoft正在利用其

《Android游戏编程入门经典》——1.2节Android SDK简介

1.2 Android SDK简介Android游戏编程入门经典Android SDK是以Java语言为基础进行开发的.Java程序是使用Java开发工具包(Java Development Kit,JDK)编译的.所有应用程序和游戏都是使用Java语言编写的,并且在使用Java运行时环境(Java Runtime Environment,JRE)的Android设备上运行.Java程序的扩展名是.class,而源代码文件的扩展名是.java.使用Android SDK构建的程序被编译到了一个可

《JavaScript入门经典(第6版)》——2.5 捕获鼠标事件

2.5 捕获鼠标事件 为页面增加与用户的交互是JavaScript的基本功能之一.为此,我们需要一些机制来检测用户和程序在特定时间在做什么,比如鼠标在浏览器的什么位置,用户是否单击了鼠标或按了键盘按键,页面是否完整加载到浏览器,等等. 这些发生的事情,我们称之为事件(event),JavaScript提供了多种工具来处理事件.第9章将详细介绍事件和处理事件的高级技术,现在先来看看利用JavaScript检测用户鼠标动作的一些方法. JavaScript使用事件处理器(event handler)

《JavaScript入门经典(第6版)》——1.7 与用户交互

1.7 与用户交互 现在来介绍window和document对象的一些方法.首先介绍的这两个方法都能提供与用户交互的手段. 1.7.1 window.alert() 即使不知道window.alert(),我们实际上在很多场合已经看到过它了.window对象位于DOM层级的最顶端,代表了显示页面的浏览器窗口.当我们调用alert()方法时,浏览器会弹出一个对话框显示设置的信息,还有一个"确定"按钮.范例如下: 这是第一个使用句点表示法的范例,其中调用了window对象的alert()方