第6章文档对象模型(DOM

合集下载

任务6 DOM文档解析

任务6 DOM文档解析——客户端查询页面的动态排序【任务描述】在网上图书管理系统中，管理员或用户经常需要用到数据排序功能，即根据指定的字段将表格的记录按照升序或降序进行重新排列。

要实现该功能，该如何访问及操作XML文档中的数据？如何实现数据的动态排序？本次任务将针对图书管理系统，使用DOM技术和XSLT模板转换技术实现XML文档数据在客户端查询页面的动态排序。

当用户单击表格的标题栏时，可以实现按标题栏的字段对查询后的图书基本信息进行动态排序，其中排序的过程在客户端实现，不需要与服务器进行交互。

本次任务的知识目标为：①了解DOM及节点层次②掌握如何创建XMLDocument对象③掌握使用节点对象访问及操作XML文档④掌握根据节点文本内容查找节点本次任务的技能目标为：①会创建XMLDocument对象②会加载、遍历XML文档③会操作DOM对XML文档添加元素、删除元素、修改元素【知识准备】6.1 DOM概述DOM是文档对象模型（Document Object Model）的缩写，它是由W3C提出的标准化的编程接口。

W3C DOM被分为不同的部分(核心DOM、XML DOM、HTML DOM)以及不同的级别(DOM Level 1/2/3)。

(1) 核心DOM：定义了一套标准的用于任何结构化文档的对象。

(2) XML DOM：定义了一套标准的用于XML文档的对象。

(3) HTML DOM：定义了一套标准的用于HTML文档的对象。

DOM包含一组对象的集合，通过操纵这些对象，可以对文档进行读取、遍历、修改、添加以及删除等操作。

6.1.1 XML DOM简介XML DOM是专门针对XML的文档对象模型(Document Object Model)的W3C标准，它独立于平台和语言，能支持C#、Java Script、VB Script 等大多数编程语言。

XML DOM定义了一套标准，用于访问XML文档和处理XML文档的对象。

第6章 DOM模型

文档对象模型DOM
1
重点
了解DOM的意义；认识并理解DOM树及其相关操作：
DOM树的构成；节点的类型；节点的访问：
网页内容的操作；网页结构的操作；网页样式的操作；网页行为的操作；
为什么要学习DOM？
➢我们学习JS，为什么还需要了解DOM？
DOM是JavaScript实现web应用的核心内容，通过 JavaScript，可以重构整个页面文档（HTML 、XHTML 或XML）：
Web浏览器对DOM的支持
如何学习DOM？——DOM树
➢ 了解DOM与页面文档结构的关系：
DOM以一棵拥有很多相互关联的节点的树形结构（简称DOM树）来表示页面文档结构，即每一个DOM节点都对应文档中的一个具体元素，JS通过访问DOM节点，就能访问页面文档中的所有组成信息。
11
DOM树/节点树/文档树结构
案例：多种方式访问节点。
假设有如下页面结构：
<div id=“outer”> <ul id=“starList”> <li id=“star1”>list1</li> <li id=“star2”>list2</li> <li id=“star3”>list3</li> </ul>
</div>
如何访问id值为“star2”的结点？
DOM简介——DOM标准的划分
W3C组织标准化了DOM，发行了该标准的三个版本：1级DOM、2级DOM和3级DOM 。
DOM1级（DOM Level 1）于1998年10月成为W3C 的推荐标准。DOM1级由两个模块组成：DOM核心（DOM Core）和DOM HTML。其中，DOM核心规定的是如何映射基于XML的文档结构，以便简化对文档中任意部分的访问和操作。DOM HTML模块则在DOM核心的基础上加以扩展，添加了针对 HTML的对象和方法。

第六章 DOM文档对象模型

版权所有◎ 版权所有◎鹏程国际计算机教育

6
HTML DOM概述概述
以上代码对应的DOM树形结构为: 树形结构为: 以上代码对应的树形结构为
版权所有◎ 版权所有◎鹏程国际计算机教育

7
节点(Node)概述概述节点
版权所有◎ 版权所有◎鹏程国际计算机教育

15
获取,设置, 获取,设置,删除元素节点的属性
<element>.getAttribute(name) :该方法用来获该方法用来获得元素节点中name属性的值属性的值. 得元素节点中属性的值 <element>.setAttribute(name,value) :该方法用该方法用来设置元素节点中name属性的值属性的值. 来设置元素节点中属性的值 <element>.removeAttribute(name) :该方法用该方法用来删除元素节点中的name属性属性. 来删除元素节点中的属性
1
DOM概述概述
DOM(Document Object Model) DOM是Document Object Model文档对象模型是文档对象模型的缩写.根据W3C DOM规范的缩写.根据规范 ),DOM是一种与 (/DOM/), ), 是一种与浏览器,平台,语言无关的接口, 浏览器,平台,语言无关的接口,使得你可以访问页面其他的标准组件.简单理解, 问页面其他的标准组件.简单理解,DOM解决了解决了 Netscape的Javascript和Microsoft的Jscript之的和的之间的冲突,给予web设计师和开发者一个标准的间的冲突,给予设计师和开发者一个标准的方法,让他们来访问他们站点中的数据, 方法,让他们来访问他们站点中的数据,脚本和表现层对像. 表现层对像.

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><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 事件可⽤于检查访客的浏览器类型和版本，以便基于这些信息来加载不同版本的⽹页。

第6章文档对象模型DOM

+是否具有特性()
6.2.3 MSXML文档对象模型的接口一览及重要接口介绍
1．IXMLDOMDocument接口、XMLDocument类和 FreeThreadedDOMDocument类（文档）
2．IXMLDOMNamedNodeMap接口 3．IXMLDOMNode接口 4．IXMLDOMNodeList接口 5．IXMLDOMElement接口 6. IXMLDOMAttribute接口 7. IXMLDOMDocumentType接口 8．IXMLDOMEntity接口 9. IXMLDOMNotation接口 10. IXMLDOMNotationImplementation接口
<<接口>> 处理指令（ProcessingInstruction） +获取目标() +获取或设置数据()
<<接口>> 文档碎片（DocumentFragment）
<<接口>> DOCTYPE +获取名称() +获取实体() +获取标记法()
<<接口>> 实体（Entity） +获取PUBLIC标识符() +获取SYSTEM标识符() +获取标记法名称()
1．文档
2．元素
3．属性 b
4．文本
5．注释
6．CDATA
6.1.3 DOM接口规范中的四个基本接口
在DOM接口规范中，有四个基本的接口：Document ，Node，NodeList以及NamedNodeMap。
1．Document接口 2．Node接口 3．NodeList接口 4. NamedNodeMap接口

第六章 DOM对象模型

【返回】
随堂练习及案例
状态栏闪烁效果别惹女孩生气
2. document对象
document 对象代表整个 HTML 文档，可用来访问页面中的所有元素。 document 对象是 window 对象的一个部分。
document对象属性
属性描述
fgColor
bgColor linkColor alinkColor vlinkColor lastModified title
code millisec 必需。要调用的函数或要执行的代码串。必需。在执行代码前需等待的毫秒数。
window.setTimeout()示例1
<html> <head> <script> function timedMsg() { var t1=setTimeout("document.getElementById('b1').value=' 变了'",2000); var t=setTimeout("alert('5秒了!')",5000); } </script> </head> <body> <input type="button" id="b1" value="武科大" onClick = "timedMsg()"> </body>
window对象属性
属性 closed length 描述返回窗口是否已被关闭。设置或返回窗口中的框架数量。
name
opener parent self status

文档对象模型

window对象
• window对象代表了打开的浏览器窗口或者文档中的iframe框架，可对当前浏览器窗口进行相应的操作。window对象是全局变量、函数的所属对象，默认在JavaScript语言中定义的变量、函数都被附加到window对象中称为全局属性或方法。
• JavaScript语言中定义的全局变量、函数等默认被附加到window对象上
文档对象模型（DOM）
基于HTML5的APP开发教程
计算机与信息工程系
本讲内容
• DOM概述 • HTML DOM简介 • JavaScript语言访问DOM • 与DOM相关的对象 • DOM相关事件
DOM概述
• 文档对象模型DOM（Document Object Model）是 W3C（万维网联盟）提供的标准，其定义了访问 HTML和XML的标准。其目的是将HTML和XML中的标签对象化，并通过DOM树结构模式访问HTML元素和XML元素及其元素属性，DOM对象中提供了大量的访问HTML文档和XML文档以及SVG的方法和属性。 DOM提供了树形结构，提供方法以访问树，可改变树结构、样式以及内容，同时DOM对象是一组节点和对象组，提供了各种属性和方法，节点可附加事件处理，最重要的是DOM对象将脚本语言与Web页面链接起来。
ame()
open()
打开一个流，以收集来自任何 document.write() 或
document.writeln() 方法的输出
write()
向文档写 HTML 表达式或 JavaScript 代码
writeln()
等同于 write() 方法，不同的是在每个表达式之后
写一个换行符
计算机与信息工程系

DOM文档对象模型

showModelessDialog弹出非模态窗口，
body对象的事件
（1）onload：网页加载完毕时触发，浏览器是一边下载文档、一边解析执行，可能会出现JavaScript执行时需要操作某个元素，这个元素还没有加载，如果这样就要把操作的代码放到body的onload事件中，或者可以把JavaScript放到元素之后。元素的onload事件是元素自己加载完毕时触发， body onload才是全部加载完成
案例：自动在复制的内容后添加版权声明。（具体代码看备注）
思路 1、发生在oncopy事件发生时 2、三步走：
第一获取剪贴板内容第二把获取的内容后面加上版权申明。。。第三设置剪贴板内容
注意：不能直接在oncopy中执行对粘贴板的操作，因此设定定时器， 0.1秒以后执行。
window对象的属性4
(3)重新导航到指定的地址： navigate("");
setInterval每隔一段时间执行指定的代码，第一个参数为代码的字符串，第二个参数为间隔时间（单位毫秒），返回值为定时器的标识 setInterval("alert('hello')", 5000); clearInterval：取消setInterval的定时执行。 clearInterval要指定清除那个定时器的标识，即 setInterval的返回值。
Value 获取表单元素几乎所有DOM元素都有innerText、innerHTML 属性（注意大小写），分别是元素标签内内容的文本表示形式和HTML源代码，这两个属性是可读可写的。用innerHTML也可以替代createElement，属于简单、粗放型、后果自负的创建

DOM详解——精选推荐

DOM详解⼀、简介DOM即（Document Object Model）：⽂档对象模型，⽤来将标记型⽂档封装成对象，并将标记型⽂档中的所有内容（标签、⽂本、属性等）都封装成对象。

即标记型⽂档的⼀种解析⽅式。

因为封装为对象就可以对其中的属性和⾏为进⾏调⽤，以便于对这些⽂档及⽂档中的内容进⾏更⽅便的操作。

DOM解析⽅式：将标记型⽂档解析为⼀颗dom树，⽽树中的内容都封装为节点对象。

按照标签的层次关系体现出标签的所属，形成⼀个树状结构。

所以我们将DOM解析⽂档形成的document对象称为dom树，⽽树中的标签以及⽂本甚⾄属性称为节点。

这个节点也称为对象。

标签通常也称为页⾯中的元素。

注意：这个DOM解析的好处是可以对树中的节点进⾏任意操作，如增删查改。

但也有弊端：这种解析需要将标记型⽂档加载进内存。

意味着如果⽂档体积很⼤时较为浪费空间。

⼆、另⼀种解析⽅式：SAX是由⼀些组织定义的⼀种民间常⽤的解析⽅式，并不是w3c标准，⽽DOM是w3c的标准。

SAX的解析⽅式：基于事件驱动的解析。

好处：获取数据的速度快。

弊端：不遵从增删查改操作。

三、DOM三种模型DOM level 1：将html⽂档封装成对象。

DOM level 2：在level1的基础上加⼊了新功能，⽐如解析名称空间。

DOM level 3：将xml⽂档封装成了对象。

四、DHTML:动态html不是⼀门语⾔，⽽是多项技术综合体的简称，这些技术包括HTML、CSS、DOM、JavaScript。

四种技术(语⾔)在动态html中扮演的⾓⾊：HTML:⽤标签封装数据。

即负责提供标签，对数据进⾏封装，⽬的是便于对该标签中的数据进⾏操作。

CSS：对数据样式进⾏定义。

即负责提供样式属性，对标签中的数据进⾏样式的定义。

DOM：将⽂档和标签等所有内容进⾏解析。

即负责将标记型⽂档及⽂档中的内容进⾏解析。

并封装成对象，在对象中定义了更多的属性和⾏为，便于对对象进⾏操作。

DOM

替换节点
reference = element.replaceChild(newChild,oldChild) 将一个给定父节点元素里面的一个子节点替换为另外一个节点当然，该方法也可以用dom树上现有的节点替换另一个现有节点。这时会先删除它然后再用它去替换oldChild
设置节点属性
element.setAttribute(attributeName,attributeVal ue)Fra bibliotek节点属性
nodeName 属性名称（只读）
属性节点将返回属性名称文本节点返回#text 元素节点返回元素名，有可能大写 nodeType属性类型 nodeValue
dom树的遍历
nodeList = node.childNodes
reference = node.firstChild
删除节点
reference = element.removeChild(node) node节点的父节点必须是element 想删除某个节点，但又不知道它的父节点，则可以使用parentNode属性 var message = document.getElementById("fineprint"); var container = message.parentNode; container.removeChild(message);
reference = node.childNodes[0] reference = stChild [elementNode.childNodes.length-1] reference = node.nextSibling reference = node.parentNode reference = node.previousSibling

文档对象模型(Dom操作)

文档对象模型（DOM）文档对象模型（DOM）是表示文档（比如HTML和XML）和访问、操作构成文档的各种元素的应用程序接口（API）。

一般的，支持Javascript的所有浏览器都支持DOM。

本文所涉及的DOM，是指W3C定义的标准的文档对象模型，它以树形结构表示HTML和XML文档，定义了遍历这个树和检查、修改树的节点的方法和属性。

1、DOM眼中的HTML文档：树在DOM眼中，HTML跟XML一样是一种树形结构的文档，<html>是根（root）节点，<head>、<title>、<body>是<html>的子（children）节点，互相之间是兄弟（sibling）节点；<body>下面才是子节点<table>、<span>、<p>等等。

如下图：这个跟XML的结构有点相似。

不同的是，HTML文档的树形主要包含表示元素、标记的节点和表示文本串的节点。

2、HTML文档的节点备注接口nodeType常量nodeType值Element Node.ELEMENT_NODE 1 元素节点Text Node.TEXT_NODE 3 文本节点Document Node.DOCUMENT_NODE 9 document Comment MENT_NODE 8 注释的文本DocumentFragment Node.DOCUMENT_FRAGMENT_NODE 11 document片断Attr Node.ATTRIBUTE_NODE 2 节点属性DOM树的根节点是个Document对象，该对象的documentElement属性引用表示文档根元素的Element对象（对于HTML文档，这个就是<html>标记）。

Javascript操作HTML文档的时候，document即指向整个文档，<body>、<table>等节点类型即为Element。

文档对象模型(DOM)

一、什么是DOMDOM是Document Object Model的缩写，是对XML文档的内容进行表示的模型。

它把XML 文档看作是一系列node和node间的关系，并且把每一个node都当作一个对象，所以叫文档对象模型。

DOM规范是W3C定义的，有三个Level：l Level 1: 定义了绝大多数基础功能l Level 2: 增加定义了namespacel Level 3: 对各个特性有了更好的支持DOM是与编程语言无关的，因此有多种实现，这里的都是用Java的API（其他的我也不会），用的是Sun定义的标准JAXP（Java API for XML Parsing），而JAXP仅仅是一个接口，它是调用其他的具体解析器来实现的。

此外不是用JAXP的DOM实现还有JDOM和DOM4J。

DOM将文档中的所有都看作节点，因此定义了一个最基础的接口是Node，它的字接口包括Element，Attr，Text等等，还包括了Document，也就是说DOM将整个文档看作是一个节点。

在Node中定义了很多方法，包括了读取节点（getFirstChild(), getNextSibling(), getLastNode(), getChildNodes(), getNodeName(), getNodeType(), getNodue(), getParentNode(), getAttributes(), getOwnerDocuemt()）、修改节点（insertBefore(), removeChild(), appendChild(), replaceChild(), setNodue()），这些方法都非常常用，但是没有定义创建节点的方法，创建节点的方法是在它的子接口Document中定义的（createXXX()），也没有定义按节点名字来得到节点的方法，这些方法是在Element和Document中定义的（getElementById(), getElementByTagName(), 注意在这里按照名字直接得到的是Element）。

文档对象模型（DOM）

文档对象模型（DOM）一、文档对象模型（DOM）DOM是Document Object Model（文档对象模型）的简称，是对XML文档进行应用开发、编程的应用程序接口（API）。

作为W3C 公布的一种跨平台、与语言无关的接口规范，DOM提供了在不同环境和应用中的标准程序接口，可以用任何语言实现。

DOM采用对象模型和一系列的接口来描述XML文档的内容和结构，即利用对象把文档模型化。

这种对象模型实现的基本功能包括：●描述文档表示和操作的接口；●接口的属性和方法；●接口之间的关系以及互操作。

DOM可对结构化的XML文档进行解析，文档中的指令、元素、实体、属性等所有内容个体都用对象模型表示，整个文档被看成是一个有结构的信息树，而不是简单的文本流，生成的对象模型就是树的节点，对象同时包含了方法和属性。

因此，对文档的所有操作都是在对象树上的进行。

在DOM中，树中的一切都是对象，不管是根节点还是实体的属性。

在DOM中主要有以下三个对象：● XML文档对象XML文档既是一种对象，同时又代表整个XML文档。

它由根元素和子元素组成。

● XML节点对象XML节点对象代表的是XML文档内部的节点，如元素、注释、名字空间等。

● XML节点列表XML文档模块列表代表了节点的集合。

利用DOM，开发人员可以动态地创建XML文档，遍历结构，添加、修改、删除内容等。

其面向对象的特性，使人们在处理XML解析相关的事务时节省大量的精力，是一种符合代码重用思想的强有力编程工具。

二、DOM的四个基本接口(引用自：)在DOM接口规范中，有四个基本的接口：Document，Node，NodeList以及NamedNodeMap。

在这四个基本接口中，Document接口是对文档进行操作的入口，它是从Node接口继承过来的。

Node接口是其他大多数接口的父类，象Documet，Element，Attribute，Text，Comment等接口都是从Node接口继承过来的。

dom_model

1 课程名称：DOM模型详解2 知识点概述2.1、上次课程2.2、作业讲解2.3、本次预备讲解的知识点3、具体内容DOM是文档对象模型(Document Object Model)的简称，借助与DOM模型，可以将一个结构化的文档转换成DOM树，程序可以访问，修改树里的节点，也可增加树里的节点，在程序操作这棵DOM树时，结构化的文档也随之动态改变。

掌握了DOM编程模型，就拥有了使用JavaScript脚本动态修改XHTML页面的能力。

DOM模型不仅可以操作XHTML文档，还可以操作XML文档3.1、DOM模型概述XHTML文档只有一个根节点，而其他节点以根节点的子节点或孙子节点的形式存在，最终形成一个结构化文档。

DOM模型则用于导航，访问结构化文档的节点，并提供新增，修改，删除结构化文档的能力。

DOM并不是一种技术，它只是访问结构化文档的一种思想（方式），基于这种思想，各种语言都有自己的DOM解析器。

DOM解析器的作用就是完成结构化文档和DOM树之间的转换关系。

对与支持DOM 模型的浏览器，当浏览器转入一个XHTML页面后，自动得到对应的DOM树,通过JavaScript 脚本修改这颗DOM树时，浏览器里的XHTML页面会随之改变如图：3.2、DOM模型和XHTML文档DOM为常用的XHTML元素提供了一套完整的继承体系.从页面的document对象到每个常用的XHTML元素，DOM模型提供了对应的类。

每个类都提供了相应的方法来操作DOM元素本身,属性及其子元素，DOM模型允许以树的方式操作XHTML文档中的每一个元素。

3.2.1、XHTML元素之间的继承图DOM模型里的XHTML元素的继承关系，如下图：常用XHTML元素3.2.3、XHTML元素之间常见的包含关系从图中可以看出，HTMLDocument对象作为整个HTML文档的最大对象，里面可能包含一个HTMLBodyElement对象，HTML文档中还有两个对象体系：表单对象和表格对象。

文档对象模型(DOM)

文档对象模型（DOM）文档对象模型（DOM）属于VBScript客户端扩展部分，在文档对象模型中提供了大量的对象，这些对象应用于浏览器上，这些对象在我们编写脚本时发挥着重要的作用。

当用户在浏览器中打开一个页面时，浏览器就会自动创建文档对象模型中的一些对象，这些对象存放了HTML页面的属性和其他的相关信息，因为这些对象在浏览器上运行，所以我们有时也称之为浏览器对象。

浏览器对象的层次图如图3-10所示，这个文档对象模型是Navigator的文档对象模型。

图3-10 文档对象模型（DOM）在这个层次图中，每个对象都是它的父对象的属性。

例如，Window对象是Document 对象的父对象，所以在引用Document对象时使用Window.Document。

在这里，Document 对象也就是Window对象的属性。

对于每一个页面，浏览器都会自动创建Window对象、Document对象、Location对象、Navigator对象、History对象。

而基于这个层次结构，还可以创建其他对象。

例如，如果在页面中有一个表单对象（名称为MyForm），那么在引用MyForm对象时，就可以使用Window.Document.MyForm。

在这里可以看出，Document对象是Window对象的属性，而如果页面中存在form对象，那么，form对象也是Document对象的属性。

在VBScript中如果要引用某个对象的属性，必须通过整个对象属性的完整路径来进行引用，也就是说，必须指明这个对象的属性的所有父对象。

例如，假如在页面上表单对象的名称为MyForm，而在表单中有—个文本框，名称为MyTextBox，而我们希望能够获取这个文本框中的字符串，那么必须从最高一级对象──Window对象开始引用。

引用方式如下所示：Window.Document.MyForm.MyTextBox.value。

3．6．2 Windows对象Window对象在VBScript浏览器对象的层次图中位于最高一层，具有唯一性，只要浏览器窗口打开，即使在浏览器中没有加载任何页面，VBScript中同样也会建立Window对象。

DOM对象介绍

一、DOM简述DOM—Document Object Model,它是W3C国际组织的一套Web标准。

它定义了访问HTML文档对象的一套习属性、方法和事件。

DOM是以层次结构组织的节点或信息片断的集合。

文档对象模型（Document Object Model）是给HTML与XML文件使用的一组API。

DOM的本质是建立网页与脚本语言或程序语言沟通的桥梁。

浏览器对象是一个分层结构，也称为文档对象模型，如下图所示：从上图可以看出：（1）打开网页后，首先看到的是浏览器窗口，即顶层的window对象。

（2）其次，看到的是网页文档的内容，即document文档。

（3）定位对象：window.document.myform.text1或document.myform.text1因为window窗口对象是所有页面的根对象，所以常常省略。

(4)地址对象location和历史对象history，它他对应IE浏览器中的地址栏和前进/后退按钮。

二、窗口window常用属性：1 window.clesed：指明窗口是否关闭。

2 window.defaultValue：窗口状态栏的默认信息。

3 window.docement：表示浏览器窗口中的HTML文档。

4 window.location：表示有关当前URL的信息。

5 window.history：表示有关当前访问过的RUL的信息。

6 ：设置或检索窗口或框架的名称。

7 window.screen：包含有关客户的屏幕和显示性能的信息。

8 window.screenX：窗口X坐标9 window.screenY：窗口Y坐标10 window.status：设置或检索窗口状态栏中的信息。

11 window.title：设置或检索窗口顶部标题栏中的信息。

12 window.self：当前窗口。

13 window.parent：当前窗口的最上层窗口。

14 window.top：当前显示的窗口的最上层窗口。

dom什么意思中文

dom什么意思中文
DOM是网页中用来表示文档中对象的标准模型，通过JavaScript 可以对网页中的所有DOM对象进行操作，是由万维网联盟W3C组织制定的标准编程接口。

文档对象模型（Document Object Model，简称DOM）。

扩展资料
DOM是Document Object Model文档对象模型的缩写。

根据W3C DOM规范，DOM是一种与浏览器，平台，语言无关的'接口，使得你可以访问页面中其他的标准组件。

简单理解，DOM解决了Netscape的JavaScript和Microsoft的JavaScript之间的冲突，给予web设计师和开发者一个标准的方法，让他们来访问他们站点中的数据、脚本和表现层对象。

DOM是以层次结构组织的节点或信息片断的集合。

这个层次结构允许开发人员在树中导航寻找特定信息。

分析该结构通常需要加载整个文档和构造层次结构，然后才能做任何工作。

由于它是基于信息层次的，因而 DOM 被认为是基于树或基于对象的。

HTML DOM 定义了访问和操作HTML文档的标准方法。

HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构（节点树）。

向你推荐的相关文章
相关文章列表
微信扫码分享。

DOM

DOM规范 DOM规范
DOM节点树 TML DOM节点树
HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构（节点树）。文档呈现为带有元素、属性和文本的树结构（节点树）。
根据上图写出对应的HTML代码
节点Node 节点Node
• 在W3C DOM中，每个容器、独立的元素或文本块 DOM中每个容器、都被看成一个节点，节点是W3C DOM的基本构建都被看成一个节点，节点是W3C DOM的基本构建块。 • 关系：父节点、子节点、兄弟节点。关系：父节点、子节点、兄弟节点。 • 意义：元素节点、属性节点、文本节点。意义：元素节点、属性节点、文本节点。
– document.getElementsByTagName（“a");返回页面所有超链 – document.getElementsByTagName（"p")返回所有段落对象
• document.getElementsByName(name值)：返回指定名称name document.getElementsByName(name值返回指定名称name 的对象数组。的对象数组。 •
– alert(document.getElementById("p1").nodeName);
对象的方法
• document.getElementById(id值):返回与指定id属性值的元 document.getElementById(id值):返回与指定id属性值的元返回与指定id属性值的节点相对应的对象对象。素节点相对应的对象。 • document.getElementsByTagName(标签名):返回指定标签的 document.getElementsByTagName(标签名):返回指定标签的标签名): 元素对象数组。元素对象数组。

对象模型 (DOM)

文档对象模型(DOM) 类是XML 文档的内存中表示形式。

DOM 使您能够以编程方式读取、操作和修改XML 文档。

XmlReader 类也读取XML，但它提供非缓存的只进、只读访问。

这意味着使用XmlReader 无法编辑属性值或元素内容，或无法插入和移除节点。

编辑是DOM 的主要功能。

XML 数据在内存中表示是常见的结构化方法，尽管实际的X ML 数据在文件中时或从另一个对象传入时以线性方式存储。

以下是XML 数据。

输入<?xml version="1.0"?><books><book><author>Carson</author><price format="dollar">31.95</price><pubdate>05/01/2001</pubdate></book><pubinfo><publisher>MSPress</publisher><state>WA</state></pubinfo></books>下图显示将此XML 数据读入DOM 结构中时内存的构造。

在XML 文档结构中，此图中的每个圆圈表示一个节点（称为XmlNode 对象）。

XmlNo de 对象是DOM 树中的基本对象。

XmlDocument 类（它扩展XmlNode）支持用于对整个文档执行操作（例如，将文档加载到内存中或将XML 保存到文件）的方法。

此外，X mlDocument 提供了查看和操作整个XML 文档中的节点的方法。

XmlNode 和XmlDo cument 都具有性能和可用性增强，并具有进行下列操作的方法和属性：访问和修改特定于DOM 的节点，如元素节点、实体引用节点等。

第6章 文档对象模型(DOM

任务6 DOM文档解析

第6章 DOM模型

第六章 DOM文档对象模型

DOM文档对象模型简介

第6章文档对象模型DOM

第六章 DOM对象模型

文档对象模型

DOM文档对象模型

DOM详解——精选推荐

DOM

文档对象模型(Dom操作)

文档对象模型(DOM)

文档对象模型（DOM）

dom_model

文档对象模型(DOM)

DOM对象介绍

dom什么意思中文

DOM

对象模型 (DOM)

第6章文档对象模型(DOM