什么是DOM(Document Object Model)文档对象模型

D:document 文档 浏览器加载的页面

DOM O:object 对象 页面及页面中的任何元素都是对象

M:module 模型 页面中的元素的组织形式

DOM被W3C组织设计为一种平台无关、语言无关的API，程序或脚本通过其动态访问、修改文档的内容、样式、结构。

DOM是web 浏览器的运行规范，javascript借助DOM成就了其web标准语言的地位，在web领域实现了所谓“一次编写到处运行”的目标。

文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。

脚本开发人员可以通过文档对象的属性、方法和事件来掌控、操纵和创建动态的网页元素。每一个网页元素（一个HTML标签）都对应着一个对象（object，所谓“对象”，用白话说就是“东西”。object这个词在台湾通常翻译成“物件”）。网页上的标签是一层层嵌套的，最外面的一层是<HTML>，文档对象模型也这样一层层嵌套着，但是通常被理解成一棵树的形状。树根是window或document对象，相当于最外层的标签的外围，也就是整个文档。树根之下（这棵树的图通常是倒着画，就好像遗传谱系或者家谱那样。树根就是唯一的共同祖先）是子一级的对象，子对象也有它自己的子对象，除了根对象以外，所有的对象都有自己的父对象，同一对象的子对象之间就是兄弟的关系。

在这种由“父子兄弟”组成的“单性繁殖家族图谱树”框架结构中，每个网页元素都可以被确切地定位。文档对象模型把整张网页组织成这样的一个树状的结构，树结构中的每一个元素都被视为一个节点（node）。包括JavaScript在内的各种编程语言都可以通过文档对象模型来访问和改变网页的各种细节。

万维网协会（World Wide Web Consortium，W3C）已经给文档对象模型制定了一系列标准，并且正在制定更多的相关标准。当代的浏览器除支持其中的一部分标准之外，还支持某些早在W3C标准制定以前就流行了的历史既成的编程接口。也就是说现在浏览器使用的技术历史由来纷繁复杂，有些人们普遍使用的DOM技术并无标准可依。

我们将深入所有通用DOM的细节（包括IE浏览器中“与众不同”的某些技术），以全面掌握面向实践的技术。

DOM和JavaScript

我经常在QQ、MSN和email中被大家问到的“有关JavaScript”的问题，95%其实是DOM的问题。人们在习惯上不爱说DOM，要么就说JavaScript，要么就扯到“Ajax”（一度火爆的“概念”，最近刚刚有所降温，一如上世纪末的“DHTML”那样。对于这些热点词汇的产生，我个人感到非常欣慰，因为每一次都带来人们对JavaScript技术的热捧。下一个热点词汇是什么？也许我们可以炮制一个也说不定……Pseudo-Mashup，如何？）。

我们用JavaScript对网页进行的所有操作都是通过DOM进行的。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容，所以如果你下载一个JavaScript语言的参考帮助文档来查的话，就连妇孺皆知的document.write方法也找不到。

下面这段代码的作用是用一个提示框逐个显示网页中所有链接的网址，代码中被标为红色的部分就是DOM。


代码如下:

var anchorTags = document.getElementsByTagName("a");
for (var i = 0; i < anchorTags.length ; i++)
{
alert("Href of this a element is : " + anchorTags[i].href + "\n");
}

这样一来哪些是核心JavaScript，哪些是DOM，各自起什么作用，就可以一目了然了。

var anchorTags =
创建了一个名为 anchorTags 的 JavaScript 变量。

document.getElementsByTagName("a")
Document接口是 DOM1核心（DOM1 Core）规范 中定义的第一个接口，而 document 是实现了Document接口的一个宿主对象。document掌控着网页里的所有东西。
DOM1核心 为Document 接口定义了 getElementsByTagName() 方法。这个方法返回一个节点列表（NodeList） ，也就是一种DOM特有的包含节点的数组，包含了所有符合匹配参数条件的标签，按照在文档中出现的顺序排列。于是anchorTags变量现在就成了一个节点列表。

;
分号是JavaScript里的语句结束符号。

for (var i = 0; i <
这是编程语言里典型的“for循环”。声明了循环变量i，逐个处理anchorTags节点列表里的每一个节点。这也是JavaScript的东西。

anchorTags.length
DOM1 核心 定义了NodeList接口的 length 属性。这个属性返回一个整数，就是节点列表里包含的节点数目。说起来JavaScript 的数组也有一个 length属性。

; i++) {
典型的JavaScript变量增1运算。

alert(
alert() 是一个DOM方法，弹出一个提示框，显示传递给该方法的参数（字符串）。话说这个东西是通称 0级DOM（DOM level 0）或DOM0的一些历史既成的编程接口当中的一员。DOM0 是一套“被某些浏览器所支持”的编程接口（事实上，市场上不存在不支持DOM0的浏览器，只有在某些软件爱好者的收藏品中才能见得到），不属于任何DOM标准规范。

"Href of this a element is : " +
一个字符串字面量和一个字符串链接符。JavaScript的东西。

anchorTags[i].href
href 是 DOM1 HTML 规范中定义的 HTMLAnchorElement 接口的属性，返回链接（<a>）元素的href属性的值。

在此我们用了像anchorTags[i]这样的用法，这和JavaScript里访问第i个数组项的语法是一样的。语言中性（language-neutral，与具体语言无关）的所谓“DOM方式”访问某个节点列表中的一个项目的办法是使用在NodeList接口中定义的item() 方法：anchorTags.item(1).href。但是大多数JavaScript实现程序都允许你使用这种简单的类似于数组的语法，而这也是大多数人实际在用的方式。

+ "\n");
又一个字符串连接。在字符串的末尾加入一个回车符。

}
“for循环”结束。

赞 (0)

相关推荐

  • JavaScript对象模型-执行模型

    JavaScript对象模型-执行模型

    简单数值类型: 有Undefined, Null, Boolean, Number和String.注意,描述中的英文单词在这里仅指数据类型的名称,并不特指JS的全局对象N an, Boolean, Number, String等,它们在概念上的区别是比较大的. 对象: 一个无序属性的集合,这些属性的值为简单数值类型.对象或者函数.同上,这里的对象并不特指全局对象Object. 函数: 函数是对象的一种,实现上内部属性[[Class]]值为"Function",表明它是函数类型,除了对象

  • SharePoint 客户端对象模型 (一) ECMA Script

    SharePoint 客户端对象模型 (一) ECMA Script

    所谓的客户端对象模型就是调用了背后的WCF服务来提供数据,为了减轻数据的访问量数据包使用JSON,我们还可以看到对象模型的设计也加入了诸多对于减轻数据访问量的考量.技术上没有什么新意,你要愿意,在SharePoint2007里面也可以实现类似的功能,当然在使用上方便了我们不少  三种使用客户端模型的.NET托管.ECMA脚本,SilverLightClient. 本文讲阐述如何使用.NET托管代码来访问SharePoint对象模型. ECMAScript Client OM需要注意的几个点 EC

  • 简述JavaScript对传统文档对象模型的支持

    简述JavaScript对传统文档对象模型的支持

    这是将其在JavaScript语言早期版本中引入的模型.大家都被所有浏览器都支持,但只允许访问文件的某些关键部分,如表单,表单元素和图像. 该模型提供了若干个只读属性,如标题,URL和上次更改提供关于文档整体的信息.除了有由该模型可用于设置和获取文档的属性值提供各种方法. 文档属性在传统DOM: 下面是文档属性,可以使用传统DOM访问列表:  文档方法在传统DOM: 这里是由传统DOM支持的方法列表:  例子: 我们可以找到任何HTML元素,使用HTML DOM任何HTML文档.例如,如果一个网

  • JavaScript 浏览器对象模型BOM使用介绍

    JavaScript 浏览器对象模型BOM使用介绍

    BOM也叫做浏览器对象模型,它提供了很多对象,用于访问浏览器的功能;这些功能与任何网页内容无关; BOM缺少规范,每个浏览器提供商都按照自己的想法去扩展它,那么浏览器共有对象就成了事实的标准; 一 window对象 // BOM的核心对象是window,它表示浏览器的一个实例; // window对象处于JavaScript结构的最顶层; // 对于每个打开的窗口,系统都会自动为其定义window对象; // window对象同时扮演着ECMAScript中Global对象的角色,因此所有在全局

  • 深入理解C++的对象模型

    深入理解C++的对象模型

    何为C++对象模型? C++对象模型可以概括为以下2部分: 1. 语言中直接支持面向对象程序设计的部分 2. 对于各种支持的底层实现机制 引言 现在有一个Point类,声明如下: class Point { public: Point(float xval); virtual ~Point(); float x() const; static int PointCount(); protected: virtual ostream& print(ostream &os) const; fl

  • JavaScript 对象模型 执行模型

    JavaScript 对象模型 执行模型

    数据类型 基本数据类型 基本数据类型是JS语言最底层的实现. 简单数值类型: 有Undefined, Null, Boolean, Number和String.注意,描述中的英文单词在这里仅指数据类型的名称,并不特指JS的全局对象N an, Boolean, Number, String等,它们在概念上的区别是比较大的. 对象: 一个无序属性的集合,这些属性的值为简单数值类型.对象或者函数.同上,这里的对象并不特指全局对象Object. 函数: 函数是对象的一种,实现上内部属性[[Class]]

  • 细品javascript 寻址,闭包,对象模型和相关问题

    正是因为JS是动态语言,所以JS的寻址是现场寻址,而非像C一样,编译后确定.此外,JS引入了this指针,这是一个很麻烦的东西,因为它"隐式"作为一个参数传到函数里面.我们先看"作用域链"话题中的例子: var testvar = 'window属性'; var o1 = {testvar:'1', fun:function(){alert('o1: '+this.testvar);}}; var o2 = {testvar:'2', fun:function(){

  • 理解Javascript_10_对象模型

    理解Javascript_10_对象模型

    对象模型 红色虚线表示隐式Prototype链. 这张对象模型图中包含了太多东西,不少地方需要仔细体会,可以写些测试代码进行验证.彻底理解了这张图,对JavaScript语言的了解也就差不多了.下面是一些补充说明: 1. 图中有好几个地方提到build-in Function constructor,这是同一个对象,可以测试验证: 复制代码 代码如下: //Passed in FF2.0, IE7, Opera9.25, Safari3.0.4 Function==Function.constr

  • C++ 多重继承和虚拟继承对象模型、效率分析

    C++ 多重继承和虚拟继承对象模型、效率分析

    一.多态 C++多态通过继承和动态绑定实现.继承是一种代码或者功能的传承共享,从语言的角度它是外在的.形式上的,极易理解.而动态绑定则是从语言的底层实现保证了多态的发生--在运行期根据基类指针或者引用指向的真实对象类型确定调用的虚函数功能!通过带有虚函数的单一继承我们可以清楚的理解继承的概念.对象模型的分布机制以及动态绑定的发生,即可以完全彻底地理解多态的思想.为了支持多态,语言实现必须在时间和空间上付出额外的代价(毕竟没有免费的晚餐,更何况编译器是毫无感情): 1.类实现时增加了virtual

  • JavaScript Window浏览器对象模型方法与属性汇总

    Window 对象 所有浏览器都支持 window 对象.它表示浏览器窗口. 所有 JavaScript 全局对象.函数以及变量均自动成为 window 对象的成员. 全局变量是 window 对象的属性. 全局函数是 window 对象的方法. 1. open方法 语法格式: window.open(URL,窗口名称,窗口风格) 功能:打开一个新的窗口,并在窗口中装载指定URL地址的网页. 说明: open方法用于打开一个新的浏览器窗口,并在新窗口中装入一个指定的URL地址: open方法在打

随机推荐