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

简介: 本节书摘来自异步社区《JavaScript入门经典(第6版)》一书中的第1章,第1.6节,作者: 【美】 Phil Ballard 译者:李 军陈冀康,更多章节内容可以访问云栖社区“异步社区”公众号查看。

本节书摘来自异步社区《JavaScript入门经典(第6版)》一书中的第1章,第1.6节,作者: 【美】 Phil Ballard 译者:李 军陈冀康,更多章节内容可以访问云栖社区“异步社区”公众号查看。

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以父子对象的形式就可以访问这些信息。这些对象都具有自己的属性和方法。

screenshot

图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对象,为了访问其中的某一个文档,需要使用相应的窗口名称和文档名称。

相关文章
|
29天前
|
JavaScript 前端开发
JavaScript操作DOM元素
JavaScript操作DOM元素
11 1
|
11天前
|
JavaScript 算法
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
|
27天前
|
JavaScript 前端开发 算法
js开发:请解释什么是虚拟DOM(virtual DOM),以及它在React中的应用。
虚拟DOM是React等前端框架的关键技术,它以轻量级JavaScript对象树形式抽象表示实际DOM。当状态改变,React不直接操作DOM,而是先构建新虚拟DOM树。通过高效diff算法比较新旧树,找到最小变更集,仅更新必要部分,提高DOM操作效率,降低性能损耗。虚拟DOM的抽象特性还支持跨平台应用,如React Native。总之,虚拟DOM优化了状态变化时的DOM更新,提升性能和用户体验。
21 0
|
5天前
|
存储 JavaScript 前端开发
JavaScript DOM 操作:解释一下 cookie、sessionStorage 和 localStorage 的区别。
Cookie是服务器发送至客户端的文本信息,会随每个请求发送回服务器,适合控制会话状态但可能暴露隐私。SessionStorage仅在当前会话中存储数据,关闭浏览器后清除,适合临时存储如登录状态。LocalStorage则持久保存数据,即使关闭浏览器也不会清除,适用于存储长期设置。三种方式各有侧重,应按需求选择。
10 0
|
5天前
|
JavaScript 前端开发 安全
JavaScript DOM 操作:解释一下浏览器的同源策略。
**同源策略**是浏览器安全基石,它阻止脚本跨不同协议、域名或端口访问资源,防止恶意行为。例如,HTTP页面无法直接用JS获取HTTPS页面内容。**CORS**允许跨域请求,但需服务器配合设置,通过`document.domain`属性可配置,但仍受限于服务器配置。
10 4
|
16天前
|
JavaScript
理解DOM树的加载过程(js的问题)
理解DOM树的加载过程(js的问题)
|
18天前
|
JavaScript 前端开发
深入了解 JavaScript 中的 DOM 和 BOM
深入了解 JavaScript 中的 DOM 和 BOM
17 4
|
25天前
|
JavaScript 前端开发 算法
深入探讨前端框架Vue.js中的虚拟DOM机制
本文将深入探讨前端框架Vue.js中的虚拟DOM机制,分析其原理、优势以及在实际开发中的应用场景,帮助读者更好地理解Vue.js框架的核心特性。
|
4月前
|
XML JavaScript 前端开发
Javaweb之javascript的DOM对象的详细解析
1.5.3 DOM对象 1.5.3.1 DOM介绍 DOM:Document Object Model 文档对象模型。也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象。
44 0
|
3月前
|
存储 移动开发 JavaScript
JavaScript:DOM对象
JavaScript:DOM对象
36 0
JavaScript:DOM对象