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

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循环”结束。

时间: 2024-11-13 09:19:15

什么是DOM(Document Object Model)文档对象模型_DOM的相关文章

dom document object model 文档对象模型

1.事件     body 事件         onload onunload onbeforeunload     常见事件         onclick(单击).ondblclick(双击).onkeydown(按键按下).onkeypress(点击按键).onkeyup(按键释放).onmousedown(鼠标按下).onmousemove(鼠标移动).onmouseout(鼠标离开元素范围).onmouseover(鼠标移动到元素范围).onmouseup(鼠标按键释放 2.动态设置

js dom文档对象模型一[入门篇]

上篇文章纳闷的问题,将在这章和以后的几章里,慢慢搞定. 从今天起,开始学习DOM编程  让我们慢慢称为一名初级的js程序员. 然后往js匠人方向发展. 学习英文: Dom:文档对象模型.Document object model Bom:浏览器对象模型. 注:也可以叫窗口对象模型.(window object model.) API:应用编程接口. 注:DOM其实可以看作一种API. Node:节点. 注:节点分为:元素节点,属性节点,文本节点. 元素节点 包含 属性节点和文本节点. Dom树:

Javascript文档对象模型(DOM)实例分析

基础知识回顾: DOM 即(Document Object Model),文档对象模型,DOM实际是把HTML当作XML文件来进行处理,用对象的眼光来打量HTML,可以说DOM是继HTML后Web的最有用的发明.   Some review of XML 网页教学网 SGML(基于标签的语言的普遍规范),在SGML被用于定义HTML的DTD时,发现HTML本身是很不规范的.主要表现在某些标签可以省略/没 有/不允许结束标签(</xxx>),标签互相嵌入而很不不规范,属性值的定义方法也不统一等等

《HTML5 Canvas开发详解》——1.3 文档对象模型(DOM)和Canvas

1.3 文档对象模型(DOM)和Canvas 文档对象模型代表了在HTML页面上的所有对象.它是语言中立且平台中立的.它允许页面的内容和样式被Web浏览器渲染之后再次更新.可以通过JavaScript访问DOM,从20世纪90年代末以来它已经成为JavaScript.DHTML和CSS开发最重要的一部分. 画布元素本身可以通过DOM,在Web浏览器中经由Canvas 2D上下文访问,但是在Canvas中创建的单个图形元素是不能通过DOM访问的.正如本章前面讲到的,这是因为画布工作在即时模式,它并

DHTML对象模型(About the DHTML Object Model)(一)

dhtml|model|object|对象|dhtml [注:最近在学习asp.net,觉得javascript的很多知识在asp.net中仍很有用,又觉得javascript的实质是利用脚本对DHTML对象编程,但网上关于DHTML层次结构的中文资料又比较少,所以看了msdn上的这个资料后就翻译了出来,希望大家多多指教.]DHTML对象模型(About the DHTML Object Model) 动态HTML(DHTML)文档对象模型(Document Object Model :DOM)

Dom 是什么的详细说明_DOM

温馨提醒: Dom文档对象模型 chm版提供下载 点击下载 什么是Dom Dom:英文全称-Document Object Model 译成中文即是:文档对像模型.听起来很术语,其实就是文档内容的结构关系.文档类型可以是HTML或XMLDom具有对Html文件和XML文件元素的访问控制能力,简单点说利用Dom可以对某个html或xml文件添加,修改,删除元素.更改其现有的结构或内容.如果你未接触过Dom,你会发现Dom太神奇了...不管你是菜鸟还是高手,在这个注重用户体验的web设计时代里,Do

JavaScript学习总结(一)——ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)

一.JavaScript简介 JavaScript是一种解释执行的脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,它遵循ECMAScript标准.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,主要用来给HTML增加动态功能. 几乎所有主流的语言都可以编译为JavaScript,进而能够在所有平台上的浏览器中执行,这也体现了JavaScript的强大性和在Web开发中的重要性.如Blade:一个Visual Studio扩展,可以将C#代码转

MDN 文档对象模型 (DOM) - DOM概述

在本文章中 什么是 DOM? DOM 和 JavaScript 如何访问 DOM? 重要的数据类型 DOM 接口 接口及对象 DOM中核心接口 测试DOM API 本节提供了一个简单的概念性的DOM介绍:DOM是什么, 它是如何组织 HTML 及 XML 文档,你要如何访问它,这个API提供了那些参考信息和实例.  什么是 DOM? 文档对象模型 (DOM) 是HTML和XML文档的编程接口.它提供了对文档的结构化的表述,并定义了一种方式可以使从程序中对该结构进行访问,从而改变文档的结构,样式和

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

         这篇文章主要介绍了简述JavaScript对传统文档对象模型的支持,是JS学习进阶中的重要知识,需要的朋友可以参考下             这是将其在JavaScript语言早期版本中引入的模型.大家都被所有浏览器都支持,但只允许访问文件的某些关键部分,如表单,表单元素和图像.         该模型提供了若干个只读属性,如标题,URL和上次更改提供关于文档整体的信息.除了有由该模型可用于设置和获取文档的属性值提供各种方法. 文档属性在传统DOM: 下面是文档属性,可以使用传