文档对象模型(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> // create a loading img and add to page var loadingImg = document.createElement("IMG"); loadingImg.src = "images/loading_xp.gif"; document.body.appendChild(loadingImg); // After page loaded, we remove the loading image 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 | 使用指定的样式表将节点及其后代转换为对象 |
结合 AJAX 入门培训 PPT 及示例代码 学习效果更好.