什么是DOM?

什么是DOM?

文档对象模型(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循环”结束。

时间: 2024-10-29 23:51:55

什么是DOM?的相关文章

DOM解析

Dom解析是将xml文件全部载入,组装成一颗dom树,然后通过节点以及节点之间的关系来解析xml文件 根据 DOM,XML 文档中的每个成分都是一个节点. DOM 是这样规定的: 整个文档是一个文档节点 每个 XML 标签是一个元素节点 包含在 XML 元素中的文本是文本节点 每一个 XML 属性是一个属性节点 注释属于注释节点 位于org.w3c.dom操作XML会比较简单,就是将XML看做是一颗树,DOM就是对这颗树的一个数据结构的描述,但对大型XML文件效果可能会不理想 首先来了解点Jav

02.简单的DOM操作

prev()函数:返回相关元素的前一兄弟节点 function prev(elem) { do { elem = elem.previousSibling; } while (elem && elem.nodeType != 1); return elem; } next()函数:返回相关元素的后一兄弟节点 function next(elem) { do { elem = elem.nextSibling; } while (elem && elem.nodeType !

DOM文档和Javascript的IE和Firefox兼容性

长久以来JavaScript兼容性一直是Web开发者的一个主要问题.在正式规范.事实标准以及各种实现之间的存在的差异让许多开发者日夜煎熬.为此,主要从以下几方面差异总结IE和Firefox的Javascript兼容性: 一.函数和方法差异 : 二.样式访问和设置 : 三.DOM方法及对象引用 : 四.事件处理 : 五.其他差异的兼容处理 .   一.函数和方法差异 1 . getYear()方法 [分析说明]先看一下以下代码: var year= new Date().getYear(); do

求助!!雅虎天气返回的xml文件用dom怎么解析?

问题描述 求助!!雅虎天气返回的xml文件用dom怎么解析? 求助!!雅虎天气返回的xml文件用dom怎么解析?要用dom最好给个实例解释一下,各位大神,求带灰... 解决方案 http://wenku.baidu.com/link?url=663YDlBxZVg5_P8TYPMdlNYNY28T1m6ZbMqFLd--a8mrCtFBcIUSkAQtalikXRHVDbw7x-bDV0Wq8pS4NDPPVKFuObPppBR1iGu5h8QGQmu 解决方案二: dom就是按html格式来解

IE中的XML DOM

dom|xml 当微软在IE 5.0中第一次加入对XML支持时,他们只是在MSXML ActiveX库(最初是为了在IE 4.0中解析Active Channels的组件)中实现XML的功能.最初的版本并没有打算公开使用,然而随着开发人员逐渐了解这个组件并尝试使用时,微软才意识到这个库的重要性,很快就在IE 4.01中发布了MSXML完全升级版本.MSXML最初还只是IE的一个组件.直到2001年,微软发布了MSXML 3.0,这是一个通过其公司网站独立发布的产品.在2001年晚些时候,微软又发

用PHP读取和编写XML DOM的实现代码

用 PHP 读取和编写可扩展标记语言(XML)看起来可能有点恐怖.实际上,XML 和它的所有相关技术可能是恐怖的,但是用 PHP 读取和编写 XML 不一定是项恐怖的任务.首先,需要学习一点关于 XML 的知识 -- 它是什么,用它做什么.然后,需要学习如何用 PHP 读取和编写 XML,而有许多种方式可以做这件事. 本文提供了 XML 的简短入门,然后解释如何用 PHP 读取和编写 XML. 什么是 XML? XML 是一种数据存储格式.它没有定义保存什么数据,也没有定义数据的格式.XML 只

用PHP读取和编写XML DOM

dom|xml     有许多技术可用于用 PHP 读取和编写 XML.本文提供了三种方法读取 XML:使用 DOM 库.使用 SAX 解析器和使用正则表达式.还介绍了使用 DOM 和 PHP 文本模板编写 XML. 用 PHP 读取和编写可扩展标记语言(XML)看起来可能有点恐怖.实际上,XML 和它的所有相关技术可能是恐怖的,但是用 PHP 读取和编写 XML 不一定是项恐怖的任务.首先,需要学习一点关于 XML 的知识 -- 它是什么,用它做什么.然后,需要学习如何用 PHP 读取和编写

轻松使用DOM 的技巧和诀窍

Dethe Elza (delza@livingcode.org), 高级技术架构师, Blast Radius  文档对象模型(Document Object Model,DOM)是用于操纵 XML 和 HTML 数据的最常用工具之一,然而它的潜力却很少被充分挖掘出来.通过利用 DOM 的优势,并使它更加易用,您将获得一款应用于 XML 应用程序(包括动态 Web 应用程序)的强大工具. 本期文章介绍了一位客串的专栏作家,同时也是我的朋友和同事 Dethe Elza.Dethe 在利用 XML

用XML数据岛结合Dom制作通讯录

一般情况下,如果要为网站提供一个通讯录程序,需要使用CGI结合后台数据库技术,这对WEB服务器的要求比较高,在很多不提供数据库功能的虚拟主机上甚至无法实现.当然,我们还可以采用TXT文本替代数据库,但TXT文本是比较难操作的,我们必须一行一行的读取判断,还要用分隔字符串实现字段分离,无法进行复杂运算. 现在,我们可以使用"可扩展的标记语言 (XML)" 来保存通讯录的数据,从而体现出XML的优点:表现数据的结构化方法,对于保存许多关系型数据结构的文件很有帮助. 一.基本原理: 在Mic

理解document.all[]:DOM文档对象模型

文章简介:浅谈document.all与WEB标准. 1.DOM WEB标准现在可真是热门中热门,不过下面讨论的是一个不符合标准的document.all[].DOM--DOCUMENT OBJECT MODEL文档对象模型,提供了访问文档对象的方法.例如文档中有一个table,你要改变它的背景颜色,那就可以在javascript中用document.all[]访问这个TABLE.但DOM也有所不同,因为浏览器厂商之间的竞争,各浏览器厂商都开发了自己的私有DOM,只能在自己的浏览器上正确运行,d