当前位置：文档之家 › 第5章++文档对象模型(DOM)

第5章++文档对象模型(DOM)

  • 格式：pdf
  • 大小：586.36 KB
  • 文档页数：38

第5章文档对象模型(DOM)文档对象模型（Document Object Model：DOM），最初是W3C为了解决浏览器混战时代不同浏览器环境之间的差别而制定的模型标准，主要是针对IE和Netscape Navigator。

W3C 解释为：“文档对象模型（DOM）是一个能够让程序和脚本动态访问和更新文档内容、结构和样式的语言平台，提供了标准的HTML和XML对象集，并有一个标准的接口来访问并操作它们。

”它使得程序员可以很快捷地访问HTML或XML页面上的标准组件，如元素、样式表、脚本等等并作相应的处理。

DOM标准推出之前，创建前端Web应用程序都必须使用Java Applet或ActiveX等复杂的组件，现在基于DOM规范，在支持DOM的浏览器环境中，Web开发人员可以很快捷、安全地创建多样化、功能强大的Web应用程序。

本章只讨论HTML DOM。

5.1 DOM概述文档对象模型定义了JavaScript可以进行操作的浏览器，描述了文档对象的逻辑结构及各功能部件的标准接口。

主要包括如下方面：z核心JavaScript语言参考（数据类型、运算符、基本语句、函数等）z与数据类型相关的核心对象（String、Array、Math、Date等数据类型）z浏览器对象（window、location、history、navigator等）z文档对象（document、images、form等）JavaScript使用两种主要的对象模型：浏览器对象模型（BOM）和文档对象模型（DOM），前者提供了访问浏览器各个功能部件，如浏览器窗口本身、浏览历史等的操作方法；后者则提供了访问浏览器窗口内容，如文档、图片等各种HTML元素以及这些元素包含的文本的操作方法。

在早期的浏览器版本中，浏览器对象模型和文档对象模型之间没有很大的区别。

观察下面的简单HTML代码：//源程序5.1<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.0//EN""/TR/REC-html140/strict.dtd"><html><head><meta http-equiv=content-type content="text/html; charset=gb2312"><title> First Page!</title></head><body><h1>Test!</h1><!--NOTE!--><p>Welcome to<em> DOM </em>World! </p><ul><li>Newer</li></ul></body></html>在DOM模型中，浏览器载入这个HTML文档时，它以树的形式对这个文档进行描述，其中各HTML的每个标记都作为一个对象进行相关操作，如图5.1所示。

图5.1实例的家谱树可以看出，html为根元素对象，可代表整个文档，head和body两个分支，位于于同一层次，为兄弟关系，存在同一父元素对象，但又有各自的子元素对象。

在支持脚本的浏览器发展过程中，出现了如下6种不同的文档对象模型，如表5.1所示：表5.1 文档对象模型的各个版本及浏览器支持文档对象模型浏览器支持Basic Object Model（基本对象模型）NN2，NN3，IE3/J1，IE3/J2，NN4，IE4，IE5，NN6，IE5.5，IE6，Moz1，Safari1Basic Plus Images（基本附加图像）NN3，IE3.01（Only for Mac），NN4，IE4，IE5，NN6，IE5.5，IE6，Moz1，Safari1NN4 Extensions（NN4扩展）NN4IE4 Extensions（IE4扩展） IE4，IE5，IE5.5，IE6(所有版本的一些功能需要Win32 OS) IE5 Extensions（IE5扩展） IE5，IE5.5，IE6(所有版本的一些功能需要Win32 OS)W3C DOM（W3C文档对象模型I、II） IE5，NN6，IE5.5，Moz1，Safari1（均为部分）术语：IE4表示Internet Explorer 4，NN4表示Netscape Navigator 4，Moz1表示Mozilla1，其余类推DOM不同版本的存在给客户端程序员带来了很多的挑战，编写当前浏览器中最新对象模型支持的JavaScript脚本相对比较容易，但如果使用早期版本的浏览器访问这些网页，将会出现不支持某种属性或方法的情况。

如果要使设计的网页能运行于绝大多数浏览器中，显而易见将是个难题。

因此，W3C DOM对这些问题做了一些标准化工作，新的文档对象模型继承了许多原始的对象模型，同时还提供了文档对象引用的新方法。

下面介绍在所有支持脚本的浏览器中均可实现的最低公用标准的文档对象模型：基本对象模型。

5.1.1基本对象模型基本对象模型提供了一个非常基础的文档对象层次结构（如图5.2所示），并最先受到NN2的脚本支持。

在该模型中，window位于对象层次的最高级，包括全部的document对象，同时具有其他对象所没有的属性和方法，document就是浏览器载入的HTML页面，其上的链接和表单元素如按钮等交互性元素被作为有属性、方法和事件处理程序的元素对象来对待。

由于功能十分有限，JavaScript主要应用于简单的网页操作，如表单合法性验证、获取程序最后一次修改的时间等等。

图5.2 基本文档对象模型IE3及其他更高版本的浏览器实现了来自NN2的基本对象模型，因此，NN2后续的浏览器版本的文档对象模型本质是相同的，只不过添加了其他的window对象及其操作方法，同时提供了引用原始对象的新方法，如navigator和screen对象等。

5.1.2浏览器扩展在各个版本浏览器中，文档对象模型都有其特殊的地方。

一般来说，每发布一个新版本的浏览器，浏览器厂商都会以各种方式扩展document对象，新版本修订了老版本的程序错误，同时添加了对象的属性、方法及事件处理程序等，不断扩充原有的功能。

当然，从新对象模型可以更快捷地执行更多任务的技术层面上来看，每次的浏览器版本更新绝对不是一件坏事，但不同浏览器的对象模型朝着不同方向发展，却给Web程序员将应用程序在不同浏览器之间移植方面带来了相当的难度，导致Web应用程序的跨平台性较差。

下面讨论文档对象模型发展过程中主要浏览器版本的对象模型，特别强调各种版本的文档对象模型的新特性以及它们和常用编程任务之间的关系。

1．Netscape Navigator浏览器基本对象模型最先在NN2种获得支持，虽然功能很有限，这也为文档对象模型的发展奠定了坚实的基础。

在NN3中通过访问嵌入对象、Applet应用程序、插件等，使第一个简单、类似于DHTML的应用程序的出现成为可能，且脚本语言能访问更多的文档属性和方法。

表5.2中列出了NN3中的document对象新增的主要内容：表5.2 NN3中document对象新增主要内容属性附加说明applets[] 文本中的applets数组，用<applet>和</applet>标记embeds[] 文本中嵌入对象的数组images[] 文本中图像的数组，用<img>和</img>标记plugins[] 浏览器中的插件数组domain 包含web服务器主机名的字符串，仅能改变为更一般的主机名NN3中的文档对象模型如图5.3所示，其中灰色框内为NN3中document对象新增内容。

图5.3 NN3中document对象新增内容NN3中增加的最重要对象就是images对象，可通过document.images得到文档的一个image数组，然后通过一下语句进行操作：document.images[n].src=…images对象的大多数属性都是只读的，而src可读可写，典型应用是图片翻转程序，如下代码所示：//源程序5.2<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.0//EN""/TR/REC-html140/strict.dtd"><html><head><title>Sample</title></head><body><a href="#"onmouseover="document.images[0].src='01.jpg'"onmouseout="document.images[0].src='02.jpg'"><img src="01.jpg"></a></body></html>在NN4之前，Web应用程序基本不具有动态性，在NN4中，新增<layer>标记支持，改进了Netscape事件模型、style对象及其操作方法，表5.3中列出了NN3中的Document对象新增的主要内容：表5.3 NN4中document对象新增主要内容属性附加说明classes 针对HTML标记，创建或使用带有class属性集的CSS样式Ids 针对HTML标记，创建或使用带有id属性集的CSS样式tags 针对任意的HTML标记，创建或使用CSS样式layers[] 文本中的层数组，<layer>标记或<div>定位元素对象NN4中的文档对象模型如图5.4所示，其中灰色框内为NN4中document对象新增内容。

图5.4 NN4中document对象新增内容新增对象layer(层)是一个容器，可以容纳自己的文档，从而拥有自己的document对象。

当然，这个文档从属于主文档。

JavaScript通过操作它的属性和方法，可以动态改变layer的尺寸、位置、隐藏与否等。

如果有多个层，还可以更改其堆栈顺序，并且首次允许层覆盖文档中的其它元素。

假如需要访问layer标记为“MyLayer”的层中标记为“MyPicture”的image对象的src属性，可通过如下方式访问：document.MyLayer.document.MyPicture.src但是在W3C DOM中，layer对象没被吸收为标准对象，而是用定位div对象和span对象代替，同时赋予了新的属性、方法和事件处理程序。

合集下载

什么是DOM及DOM操作？

什么是DOM及DOM操作？

什么是DOM及DOM操作？什么是 DOM ?DOM(⽂档对象模型)是针对于xml但是扩展⽤于html的应⽤程序编程接⼝，定义了访问和操作html的⽂档的标准。

W3C⽂档对象模型是中⽴于平台和语⾔之间的接⼝，它允许程序和脚本动态的访问和更新⽂档的内容、结构、样式。

总之HTML是关于如何获取、修改、添加和删除HTML元素的标准。

DOM 分层节点DOM的分层节点⼀般被称作是DOM树，树中的所有节点都可以通过脚本语⾔例如js进⾏访问，所有HTMlL元素节点都可以被创建、添加或者删除。

在DOM分层节点中，页⾯就是⽤分层节点图表⽰的。

整个⽂档是⼀个⽂档节点，就想是树的根⼀样。

每个HTML元素都是元素节点。

HTML元素内的⽂本就是⽂本节点。

每个HTML属性时属性节点。

当咱们访问⼀个web页⾯时，浏览器会解析每个HTML元素，创建了HTML⽂档的虚拟结构，并将其保存在内存中。

接着，HTML页⾯被转换成树状结构，每个HTML元素成为⼀个叶⼦节点，连接到⽗分⽀。

考虑以下 Html 结构：<!DOCTYPE html><html lang="en"><head><title>A super simple title!</title></head><body><h1>A super simple web page!</h1></body></html>在这个结构的顶部有⼀个document，也称为根元素，它包含另⼀个元素：html。

html元素包含⼀个head，⽽ head ⼜有⼀个title。

然后body 包含⼀个h1。

每个HTML元素都由特定类型（也称为接⼝）表⽰，并且可能包含⽂本或其他嵌套元素：document (HTMLDocument)|| --> html (HTMLHtmlElement)|| --> head (HtmlHeadElement)| || | --> title (HtmlTitleElement)| | --> text: "A super simple title!"|| --> body (HtmlBodyElement)| || | --> h1 (HTMLHeadingElement)| | --> text: "A super simple web page!"每个HTML元素都来⾃Element，但其中很⼤⼀部分都是专⽤的。

java document详解

java document详解

在JAVA中使用文档对象模型DOM经验小结文档对象模型(DOM) 是一个文档标准，对于完备的文档和复杂的应用程序，DOM 提供了大量灵活性。

DOM标准是标准的。

它很强壮且完整，并且有许多实现。

这是许多大型安装的决定因素--特别是对产品应用程序，以避免在API发生改变时进行大量的改写。

以上是我在选择处理XML数据时之所以没有选择JDOM或者dom4j等其它面向对象的标准的原因，不过也由于DOM从一开始就是一种与语言无关的模型，而且它更趋向用于像C或Perl这类语言，没有利用Java的面向对象的性能，所以在使用的过程中也遇到了不少的麻烦，今天这里做一个小结。

另外，我目前使用XML主要是作为数据传输的统一格式，并统一用户界面展示的接口，应用的面并不是很广，所以使用到的DOM的内容其实不多。

在准备使用它的时候，是做了充足的准备的，也有遇到困难的准备，所以一开始就有了一个简单的工具类来封装DOM对象使用时必要的公共方法，实际证明这样做是很明智的，一个简单的创建Document 对象的操作，要是每次都需要写上5行以上代码，并且还要处理那些烦人的Exception，实在是会打击大家的积极性，所以在最初，做了一个XMLTool类，专门封装了如下的公共方法：1、 Document对象创建（包括空的Document对象创建，以一个给定Node节点作为根节点创建。

2、将一个规范的XML字符串转换成一个Document对象。

3、从物理硬盘读取一个XML文件并返回一个Document对象。

4、将一个Node对象转换成字符串。

其中每个方法都截获相关的DOM操作所抛出的异常，转换成一个RuntimeException抛出，这些异常在实际使用过程中，一般状况下其实都不会抛出，特别是象生成一个Document对象时的ParserConfigurationException、转换Node节点成字符串时要生成一个Transformer对象时的TransformerConfigurationException等等，没有必要在它们身上花时间精力。

DOM文档对象模型简介

DOM文档对象模型简介

DOM⽂档对象模型简介DOM简介DOM是W3C（万维⽹联盟）的标准"W3C⽂档对象模型DOM是中⽴于平台和语⾔的接⼝，它允许程序和脚本动态地访问和更新⽂档的内容、结构、样式".W3C DOM标准分为3个不同部分HTML DOM 定义了所有HTML元素的对象和属性，以及访问它们的⽅法HTML DOM 节点DOM 节点 HTML⽂档中所有内容都是节点：整个⽂档是⼀个⽂档节点每个HTML元素是元素节点HTML元素内的⽂本是⽂本节点每个HTML属性是属性节点注释是注释节点HTML DOM Tree 节点树树中所有节点均可以通过JS访问，修改。

节点⽗、⼦、同胞节点树中节点间彼此拥有层级关系Parent，child，sibling警告！DOM处理中常见错误是希望元素节点包含⽂本<title>DOM学习</title> 元素节点是<title>，包含值"DOM学习"的⽂本节点可以通过innerHTML属性来访问⽂本节点的值HTML DOM ⽅法编程接⼝可以通过javascript（以及其他编程语⾔）对HTML DOM进⾏访问所有HTML元素被定义为对象，⽽编程接⼝则是对象⽅法和对象属性⽅法是可以执⾏的动作（添加/修改元素）属性是可以获取或者设置的值(节点名称/内容)HTML DOM对象-⽅法-属性getElementById(id)获取带有执⾏id的节点（元素）getElementsByTagName(tag)获取所有指定标签的节点，p标签等getElementsByClassName（class）获取所有指定类型的节点createElement(ele)创建新标签元素createTextNode（txt）创建⽂本节点insertBefore(newNode，node)在node节点之后插⼊newNodeappendChild(node)插⼊新节点（元素），作为⽗节点的最后⼀个⼦节点replaceNode(newNode,oldNode)替换旧元素removeChild(node)删除⼦节点（元素）innerHTML节点（元素）的⽂本值parentNode节点（元素）的⽗节点childNodes节点（元素）的⼦节点attributes节点（元素）的属性节点HTML DOM属性innerHTML属性获取元素内容nodeName属性规定节点名称nodeName属性是只读属性元素节点的nodeName与标签名称相同属性节点的nodeName与属性名称相同⽂本节点的nodeName始终是#text⽂本节点的nodeName始终是#text⽂档节点的nodeName始终是#documentnodeName始终包含HTML元素的⼤写字母标签名称nodeValue属性规定节点值元素节点的nodeValue是undefined或null⽂本节点的nodeValue是⽂本本⾝属性节点的nodeValue是属性值nodeType属性返回节点类型，只读属性元素类型nodeType元素1属性2⽂本3注释8⽂档9举例<!doctype html><html><!--<head><meta charset="utf-8"><title>Dom事件</title></head>--><body><p id="myid1" style="color:blue">我的⽂档内容1</p><p id="myid2" style="color:blue">我的⽂档内容2</p><script type="text/javascript">var node=document.getElementById("myid1"); //通过id号获取元素节点document.write(node.innerHTML+"<br>"); //输出元素节点的⽂本内容node.innerHTML="更新⽂档内容 via innerHTML"; //更新元素节点的⽂本内容document.getElementById("myid2").firstChild.nodeValue="更新⽂档内容via nodeValue";//更新元素节点的⽂本内容document.write(node.nodeName+"\t"+node.nodeValue+"<br>");document.write(node.firstChild.nodeName+"\t"+node.firstChild.nodeValue+"<br>"); //输出⽂本节点和值</script></body></html>HTML DOM访问查找HTML元素getElementById（id）获取指定id的元素getElementsByTagName（tag）获取带有指定标签名（p标签，a标签等）的所有元素getElementsByClassName（class）获取带有相同类名的所有元素HTML DOM修改改变元素⽂本内容 parentNode.innerHTML node.nodeValue改变CSS样式 node.style改变HTML属性创建新的HTML元素 createElement - createTextNode- appendChild删除已有的HTML元素 parentNode.removeChild (childNode) childNode.parentNode.removeChild(childNode)改变事件（处理程序）HTML DOM事件⽤户点击⿏标 onclick<input type="button" id="mybtn" value="提交" onclick="this.value='不提交'"/>//直接将javascript语句写在事件处理中< input type="button" id="mybtn" value="提交" onclick="myFunction(this)"/>//通过js函数执⾏，注意实参直接是指定元素<script type="text/javascript">Function myFunction(ele){ //虽然实参是this，但是在写函数时，不可以将形参命名为this，与关键字冲突ele.value="不提交";}</script>onload 事件可⽤于检查访客的浏览器类型和版本，以便基于这些信息来加载不同版本的⽹页。

第5章 DOM编程-任务1 画出页面的文档节点结构图

第5章 DOM编程-任务1 画出页面的文档节点结构图


<title>
img
<h1>
<p>
<p>DOM应用</p>
</body> </htm文l>本：DOM节点
文本：喜欢的水果
文本：DOM应用
DOM模型的相关概念
➢DOM树中的节点类型和节点关系
属性 节点
文档：document 根节点：<html>
<head>
同级 关系
文档节点 document
元素节点 …..
DOM模型的相关概念
➢ 什么是DOM？
• 文档对象模型（Document Object Model） • 通过DOM可以动态改变文档内容
➢ 动态改变文档内容的原理
• 解析文档（如HTML）并生成DOM树 • 通过DOM标准接口+编程语言改变文档内容
DOM模型的相关概念
➢解析文档生成DOM树的过程
任务描述
根据下面一段html代码，画出该html页面的DOM结构图。 <html> <head> <title>DOM节点</title> </head> <body>
<img src="images/fruit.jpg" alt="图片" id="s1" /> <h1>喜欢的水果</h1> <p>DOM应用</p> </body> </html>
<html> <head> <title>DOM节点</title>