什么是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 相关文章推荐
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
Nov 11 Javascript
jtable列中自定义button示例代码
Nov 21 Javascript
jquery查找父元素、子元素(个人经验总结)
Apr 09 Javascript
javascript中为某个元素指定事件的三种方式
Aug 07 Javascript
JavaScript中的toUTCString()方法使用详解
Jun 12 Javascript
JS实现超精简响应鼠标显示二级菜单代码
Sep 12 Javascript
JS获取月份最后天数、最大天数与某日周数的方法
Dec 08 Javascript
小心!AngularJS结合RequireJS做文件合并压缩的那些坑
Jan 09 Javascript
node.js路径处理方法以及绝对路径详解
Mar 04 Javascript
Angular.JS实现无限级的联动菜单(使用demo)
Feb 08 Javascript
详解Angularjs 自定义指令中的数据绑定
Jul 19 Javascript
ES6 对象的新功能与解构赋值介绍
Feb 05 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-timeit估计php函数的执行时间
2015/09/06 PHP
php使用curl并发减少后端访问时间的方法分析
2016/05/12 PHP
PHP中的表达式简述
2016/05/29 PHP
在 Laravel 中 “规范” 的开发短信验证码发送功能
2017/10/26 PHP
JS中处理与当前时间间隔的函数代码
2012/05/23 Javascript
JavaScript基础知识之数据类型
2012/08/06 Javascript
jquery获取tr中控件值并操作tr实现思路
2013/03/27 Javascript
jquery 漂亮的删除确认和提交无刷新删除示例
2013/11/13 Javascript
表单提交前触发函数返回true表单才会提交
2014/03/11 Javascript
ionic隐藏tabs的方法
2016/08/29 Javascript
web 前端常用组件之Layer弹出层组件
2016/09/22 Javascript
微信小程序 wx:key详细介绍
2016/10/28 Javascript
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
2017/06/26 jQuery
Vuex利用state保存新闻数据实例
2017/06/28 Javascript
JS获取子、父、兄节点方法小结
2017/08/14 Javascript
vue实现动态按钮功能
2019/05/13 Javascript
Vue使用JSEncrypt实现rsa加密及挂载方法
2020/02/07 Javascript
解决idea开发遇到javascript动态添加html元素时中文乱码的问题
2020/09/29 Javascript
[42:35]2018DOTA2亚洲邀请赛3月30日 小组赛A组 VG VS OpTic
2018/03/31 DOTA
Python使用multiprocessing实现一个最简单的分布式作业调度系统
2016/03/14 Python
Python选课系统开发程序
2016/09/02 Python
pandas apply 函数 实现多进程的示例讲解
2018/04/20 Python
python用插值法绘制平滑曲线
2021/02/19 Python
numpy创建单位矩阵和对角矩阵的实例
2019/11/29 Python
pytorch实现从本地加载 .pth 格式模型
2020/02/14 Python
Python使用20行代码实现微信聊天机器人
2020/06/05 Python
CSS3实现多背景展示效果通过CSS3定位多张背景
2014/08/10 HTML / CSS
利用CSS3实现的文字定时向上滚动
2016/08/29 HTML / CSS
报社实习生自荐信
2014/01/24 职场文书
入党申请自荐书范文
2014/02/11 职场文书
喝酒驾驶检讨书
2014/10/01 职场文书
新娘婚礼答谢词
2015/09/29 职场文书
小学教师师德培训心得体会
2016/01/09 职场文书
面试必问:圣杯布局和双飞翼布局的区别
2021/05/13 HTML / CSS
告别网页搜索!教你用python实现一款属于自己的翻译词典软件
2021/06/03 Python
关于python中readlines函数的参数hint的相关知识总结
2021/06/24 Python