文档对象模型(DOM)
文档对象模型(DOM)是表示文档(比如HTML和XML)和访问、操作构成文档的各种元素的应用程序接口(API)。一般的,支持 Javascript的所有浏览器都支持DOM。本文所涉及的DOM,是指W3C定义的标准的文档对象模型,它以树形结构表示HTML和XML文档,定义了遍历这个树和检查、修改树的节点的方法和属性。
DOM眼中的HTML文档:树
在DOM眼中,HTML跟XML一样是一种树形结构的文档,< html>是根(root)节点,< head>、< title>、< body>是< html>的子(children)节点,互相之间是兄弟(sibling)节点;< body>下面才是子节点< table>、< span>、< p>等等。如下图:
这个是不是跟XML的结构有点相似呢。不同的是,HTML文档的树形主要包含表示元素、标记的节点和表示文本串的节点。
注: 在 FireFox 浏览器中, 您可以通过菜单"工具"->"DOM查看器"来浏览文档的DOM结构; IE 浏览器中您需要下载微软的 Internet Explorer Developer Toolbar 来查看 DOM, 在BrowserDevTool下载此工具.
HTML文档的节点
DOM下,HTML文档各个节点被视为各种类型的Node对象。每个Node对象都有自己的属性和方法,利用这些属性和方法可以遍历整个文档树。由于HTML文档的复杂性,DOM定义了nodeType来表示节点的类型。这里列出Node常用的几种节点类型:
接口
nodeType常量
nodeType值
备注
Element |
Node.ELEMENT_NODE |
1 |
元素节点 |
Text |
Node.TEXT_NODE |
3 |
文本节点 |
Document |
Node.DOCUMENT_NODE |
9 |
document |
Comment |
Node.COMMENT_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。Comment类型的节点则是指文档的注释。具体节点类型的含义,请参考《Javascript权威指南》,在此不赘述。
Document定义的方法大多数是生产型方法,主要用于创建可以插入文档中的各种类型的节点。常用的Document方法有:
方法
描述
createAttribute() |
用指定的名字创建新的Attr节点。 |
createComment() |
用指定的字符串创建新的Comment节点。 |
createElement() |
用指定的标记名创建新的Element节点。 |
createTextNode() |
用指定的文本创建新的TextNode节点。 |
getElementById() |
返回文档中具有指定id属性的Element节点。 |
getElementsByTagName() |
返回文档中具有指定标记名的所有Element节点。 |
对于Element节点,可以通过调用getAttribute()、setAttribute()、removeAttribute()方法来查询、设置或者删除一个Element节点的性质,比如< table>标记的border属性。下面列出Element常用的属性:
属性 描述 tagName 元素的标记名称,比如< p>元素为P。HTML文档返回的tabName均为大写。
Element常用的方法:
方法
描述
getAttribute() |
以字符串形式返回指定属性的值。 |
getAttributeNode() |
以Attr节点的形式返回指定属性的值。 |
getElementsByTabName() |
返回一个Node数组,包含具有指定标记名的所有Element节点的子孙节点,其顺序为在文档中出现的顺序。 |
hasAttribute() |
如果该元素具有指定名字的属性,则返回true。 |
removeAttribute() |
从元素中删除指定的属性。 |
removeAttributeNode() |
从元素的属性列表中删除指定的Attr节点。 |
setAttribute() |
把指定的属性设置为指定的字符串值,如果该属性不存在则添加一个新属性。 |
setAttributeNode() |
把指定的Attr节点添加到该元素的属性列表中。 |
Attr对象代表文档元素的属性,有name、value等属性,可以通过Node接口的attributes属性或者调用Element接口的 getAttributeNode()方法来获取。不过,在大多数情况下,使用Element元素属性的最简单方法是getAttribute()和 setAttribute()两个方法,而不是Attr对象。
使用DOM操作HTML文档
Node对象定义了一系列属性和方法,来方便遍历整个文档。用parentNode属性和childNodes数组可以在文档树中上下移动;通过遍历childNodes数组或者使用firstChild和nextSibling属性进行循环操作,也可以使用lastChild和previousSibling进行逆向循环操作,也可以枚举指定节点的子节点。而调用appendChild()、insertBefore()、removeChild()、 replaceChild()方法可以改变一个节点的子节点从而改变文档树。
需要指出的是,childNodes的值实际上是一个NodeList对象。因此,可以通过遍历childNodes数组的每个元素,来枚举一个给定节点的所有子节点;通过递归,可以枚举树中的所有节点。下表列出了Node对象的一些常用属性和方法:
Node对象常用属性:
属性
描述
attributes |
如果该节点是一个Element,则以NamedNodeMap形式返回该元素的属性。 |
childNodes |
以Node的形式存放当前节点的子节点。如果没有子节点,则返回空数组。 |
firstChild |
以Node的形式返回当前节点的第一个子节点。如果没有子节点,则为null。 |
lastChild |
以Node的形式返回当前节点的最后一个子节点。如果没有子节点,则为null。 |
nextSibling |
以Node的形式返回当前节点的兄弟下一个节点。如果没有这样的节点,则返回null。 |
nodeName |
节点的名字,Element节点则代表Element的标记名称。 |
nodeType |
代表节点的类型。 |
parentNode |
以Node的形式返回当前节点的父节点。如果没有父节点,则为null。 |
previousSibling |
以Node的形式返回紧挨当前节点、位于它之前的兄弟节点。如果没有这样的节点,则返回null。 |
Node对象常用方法:
方法
描述
appendChild() |
通过把一个节点增加到当前节点的childNodes组,给文档树增加节点。 |
cloneNode() |
复制当前节点,或者复制当前节点以及它的所有子孙节点。 |
hasChildNodes() |
如果当前节点拥有子节点,则将返回true。 |
insertBefore() |
给文档树插入一个节点,位置在当前节点的指定子节点之前。如果该节点已经存在,则删除之再插入到它的位置。 |
removeChild() |
从文档树中删除并返回指定的子节点。 |
replaceChild() |
从文档树中删除并返回指定的子节点,用另一个节点替换它。 |
接下来,让我们使用上述的DOM应用编程接口,来试着操作HTML文档。
首先举一个最简单的例子, 用 DOM 动态生成一个 Loading 的 IMG 并加入页面中, 当页面完全载入后, 就移除这个 IMG 对象.
<script>
var loadingImg = document.createElement("IMG");
loadingImg.src = "images/loading_xp.gif";
document.body.appendChild(loadingImg);
document.body.onload = function() {
document.body.removeChild(loadingImg);
};
</script>
JavaScript 解析和生成 XML
用 JS 解析和生成 XML 一般都是使用 DOMDocument 这个对象, 下面简单的列出其属性和方法:
属性:
Attributes |
存储节点的属性列表 |
(只读) |
childNodes |
存储节点的子节点列表 |
(只读) |
dataType |
返回此节点的数据类型 |
Definition |
以DTD或XML模式给出的节点的定义 |
(只读) |
Doctype |
指定文档类型节点 |
(只读) |
documentElement |
返回文档的根元素 |
(可读写) |
firstChild |
返回当前节点的第一个子节点 |
(只读) |
Implementation |
返回XMLDOMImplementation对象 |
lastChild |
返回当前节点最后一个子节点 |
(只读) |
nextSibling |
返回当前节点的下一个兄弟节点(只读) |
nodeName |
返回节点的名字 |
(只读) |
nodeType |
返回节点的类型 |
(只读) |
nodeTypedValue |
存储节点值 |
(可读写) |
nodeValue |
返回节点的文本 |
(可读写) |
ownerDocument |
返回包含此节点的根文档 |
(只读) |
parentNode |
返回父节点 |
(只读) |
Parsed |
返回此节点及其子节点是否已经被解析 |
(只读) |
Prefix |
返回名称空间前缀 |
(只读) |
preserveWhiteSpace |
指定是否保留空白 |
(可读写) |
previousSibling |
返回此节点的前一个兄弟节点 |
(只读) |
Text |
返回此节点及其后代的文本内容 |
(可读写) |
url 返回最近载入的XML文档的URL |
(只读) |
Xml 返回节点及其后代的XML表示 |
(只读) |
方法:
appendChild |
为当前节点添加一个新的子节点,放在最后的子节点后 |
cloneNode |
返回当前节点的拷贝 |
createAttribute |
创建新的属性 |
createCDATASection |
创建包括给定数据的CDATA段 |
createComment |
创建一个注释节点 |
createDocumentFragment |
创建DocumentFragment对象 |
createElement |
创建一个元素节点 |
createEntityReference |
创建EntityReference对象 |
createNode |
创建给定类型,名字和命名空间的节点 |
createPorcessingInstruction |
创建操作指令节点 |
createTextNode |
创建包括给定数据的文本节点 |
getElementsByTagName |
返回指定名字的元素集合 |
hasChildNodes |
返回当前节点是否有子节点 |
insertBefore |
在指定节点前插入子节点 |
Load |
导入指定位置的XML文档 |
loadXML |
导入指定字符串的XML文档 |
removeChild |
从子结点列表中删除指定的子节点 |
replaceChild |
从子节点列表中替换指定的子节点 |
Save |
把XML文件存到指定节点 |
selectNodes |
对节点进行指定的匹配,并返回匹配节点列表 |
selectSingleNode |
对节点进行指定的匹配,并返回第一个匹配节点 |
transformNode |
使用指定的样式表对节点及其后代进行转换 |
transformNodeToObject |
使用指定的样式表将节点及其后代转换为对象 |
分享到:
相关推荐
web开发必备,含:ajax实战中文版.pdf,CSS中文手册.chm、Div+CSS 布局.pdf,DOM文档.chm、HTML基础.chm、xml手册.chm,正则表达式.CHM,JS宝典.chm
AJAX教程(17):把XML文件显示为HTML表格借鉴.pdf
ajax 基础教程 Foundations_Of_Ajax中文版及源代码(亚马逊计算机榜首图书,国内第1本Ajax图书)
通过DOM和Ajax使用XML_从菜鸟到专家2006
hex163下载频道:所有精品资料全部无分下载! 第 1 部分:Ajax 简介 第 2 部分:: 使用 JavaScript 和 Ajax 发出异步请求 第 3 部分: Ajax 中的高级...第 15部分:面向 Java 开发人员的 Ajax: 探索 Google Web Toolkit
AJAX进阶教程,快速掌握并精通
您将探索如何使用Ajax来增强站点并使其具有Web 2.0的感觉,以及其他JavaScript增强如何将Web浏览器和网站变成真正的应用程序。
第 2部分: 使用JavaScript和Ajax发出异步请求 10 第 3 部分: Ajax 中的高级请求和响应 26 第 4 部分: 利用 DOM 进行 Web 响应 40 第 5 部分: 操纵 DOM 51 第 6 部分: 建立基于 DOM 的 Web 应用程序 65 第 7 部分: 在...
浏览器安装npm install checkout-browser-kit阿贾克斯CORS 和 JSONP function ajax ( url , params , successCallback , errorCallback , options ) ; 常数ajaxConstants: { defaults : { TYPE : 'get' , TIMEOUT_MS...
web 前端教程,js,html,css,ajax,xml,dom 详细介绍
PHP进阶学习10 PHP5 Ajax应用利用
XML DWR 解析dom 解析xml Ajax 杂乱的例子 学习笔记
AJAX相关开发的所有帮助手册,其中包括:XMLHTTP 手册 XMLDOM.chm手册 DHTML.chm手册 Css2.0.chm 手册 Script.chm手册
此ajax电子书是学习ajax入门和进阶的很好的参考和帮助文档,现在给大家共享 共同进步!
Ajax:拥抱JSON,让XML走开 Ajax:拥抱JSON,让XML走开
JQuery DoM和ajax 操作大全源码
这一期文章将了解如何创建、删除和修改DOM树的各个部分,了解如何实现网页的即时更新。了解如何处理 Web页面的DOM树。比方说,如果向DOM树中增加一个元素,这个元素就会立即出现在用户的Web浏览器中 —— 不需要重新...
Beginning JavaScript with DOM Scripting and Ajax is an essential resource for modern JavaScript programming. This completely updated second edition covers everything you need to know to get up-to-...
( ASP.NET MVC2程序开发入门到精通系列课程(10):整合AJAX应用