html dom 对象 window对象 document对象,第六篇：DOM对象与Document

DOM对象概述

DOM是一套Web标准，它定义了访问HTML文档对象的一套属性、方法和事件，DOM实际上是建立网页与JavaScript语言沟通的桥梁。

对象模型结构

DOM的英文全称是Document Object Model，即文档对象模型。文档一般是指HTML文档，DOM对象模型将HTML文档组织为以Node对象为节点的层次结构。一个节点是一个Node对象。Node对象按照节点类型分为元素节点、属性节点、文本节点和注释节点。

元素节点(也称为元素对象)由元素节点、属性节点、文本节点和注释节点构成。

元素对象结构如下图所示：

在DOM对象模型中，Document是文档对象，通过Document对象可以获取所有HTML文档中的元素对象。Document对象结构如下图所示：

浏览器在解析HTML文档时，若遇到

标签和，会自动创建Window对象，Windos对象是DOM对象模型中最顶层的对象，通过Windos对象可以获取Document对象。

DOM对象层次结构

DOM最顶层是Window对象，Window对象下面是Document(文档对象)、Navigator(浏览器对象)、Screen(屏幕对象)、History(浏览历史对象)、Location(URL对象)。

DOM对象层次结构如下图所示：

DOM对象的使用

应用DOM可以完整解析HTML网页，DOM会在内存中构建一棵完整的解析树，来实现对网页文档的动态访问和操作，它把网页所有的HTML元素都解析为树上层次分明的节点，然后可以对这些节点进行添加、修改、删除和查看等操作。

在DOM树中，Window对象是树的根节点，Document对象是Window的子节点，也可以说Window对象是Document对象的父节点。Winodw对象表示浏览器打开的窗口，它是一个全局对象，浏览器窗口内所有的计算和操作都在窗口环境中，因此Window对象的属性也可以直接作为全局变量来使用。

例如：documet对象是Window对象的属性，在JS函数中可以直接使用documet对象，而不必写winodw.document。

同样也可以把Window对象的方法作为全局函数来使用。例如：alert()方法是Window对象的方法，在JS函数内可以直接写alert()，而不必写window.alert()。

案例1：递归遍历DOM节点

JavaScript开发案例

朝辞白帝彩云间，

千里江陵一日还。

两岸猿声啼不住，

轻舟已过万重山。

举报/反馈