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


Posted in Javascript onMarch 05, 2012

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

Javascript 相关文章推荐
setAttribute 与 class冲突解决
Feb 17 Javascript
学习ExtJS TextField常用方法
Oct 07 Javascript
jQuery :nth-child前有无空格的区别分析
Jul 11 Javascript
JavaScript版DateAdd和DateDiff函数代码
Mar 01 Javascript
简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器
Oct 22 Javascript
js兼容火狐获取图片宽和高的方法
May 21 Javascript
jQuery实现多级联动下拉列表查询框
Jan 18 Javascript
angular.js+node.js实现下载图片处理详解
Mar 31 Javascript
基于js实现判断浏览器类型代码实例
Jul 17 Javascript
vue使用canvas实现移动端手写签名
Sep 22 Javascript
Vue的过滤器你真了解吗
Feb 24 Vue.js
类和原型的设计模式之复制与委托差异
Jul 07 Javascript
JQuery魔力之$(&quot;tagName&quot;)与selector
Mar 05 #Javascript
30个让人兴奋的视差滚动(Parallax Scrolling)效果网站
Mar 04 #Javascript
Javascript实现DIV滚动自动滚动到底部的代码
Mar 01 #Javascript
用最通俗易懂的代码帮助新手理解javascript闭包 推荐
Mar 01 #Javascript
关于js日期转化为毫秒数“节省20%的效率和和节省9个字符“问题
Mar 01 #Javascript
JavaScript中使用构造器创建对象无需new的情况说明
Mar 01 #Javascript
JavaScript中的变量声明早于赋值分析
Mar 01 #Javascript
You might like
php过滤html标记属性类用法实例
2014/09/23 PHP
PHP explode()函数的几个应用和implode()函数有什么区别
2015/11/05 PHP
ThinkPHP5框架实现简单的批量查询功能示例
2018/06/07 PHP
详解PHP版本兼容之openssl调用参数
2018/07/25 PHP
PHP检查端口是否可以被绑定的方法示例
2018/08/09 PHP
Laravel5.5 视图 - 创建视图和数据传递示例
2019/10/21 PHP
PHP队列场景以及实现代码实例详解
2021/02/26 PHP
使用js正则控制input标签只允许输入的值
2013/07/29 Javascript
AngularJS HTML编译器介绍
2014/12/06 Javascript
javascript清空table表格的方法
2015/05/14 Javascript
Nginx上传文件全部缓存解决方案
2015/08/17 Javascript
javascript实现html页面之间参数传递的四种方法实例分析
2015/12/15 Javascript
JS随机打乱数组的方法小结
2016/06/22 Javascript
JS如何设置iOS中微信浏览器的title
2016/11/22 Javascript
微信小程序自定义组件
2017/08/16 Javascript
selenium+java中用js来完成日期的修改
2019/10/31 Javascript
node.js实现简单的压缩/解压缩功能示例
2019/11/05 Javascript
vue实现顶部菜单栏
2020/11/08 Javascript
[33:09]完美世界DOTA2联赛循环赛 Forest vs DM BO2第二场 10.29
2020/10/29 DOTA
python sort、sorted高级排序技巧
2014/11/21 Python
python的paramiko模块实现远程控制和传输示例
2017/10/13 Python
Python 文本文件内容批量抽取实例
2018/12/10 Python
Python类和实例的属性机制原理详解
2020/03/21 Python
Python函数默认参数常见问题及解决方案
2020/03/26 Python
Python绘制组合图的示例
2020/09/18 Python
法院实习人员自我鉴定
2013/09/26 职场文书
农救科工作职责
2013/11/27 职场文书
新入职员工的自我介绍演讲稿
2014/01/02 职场文书
初中化学教学反思
2014/01/23 职场文书
十八届三中全会感言
2014/03/10 职场文书
入党积极分子自我鉴定范文
2014/03/25 职场文书
地球一小时倡议书
2014/04/15 职场文书
经典导游欢迎词
2015/01/26 职场文书
2015年反洗钱工作总结
2015/04/25 职场文书
村党组织公开承诺书
2015/04/30 职场文书
以下牛机,你有几个
2022/04/05 无线电