本文介绍了DOM模型的基本概念及其在Ajax开发中的应用。探讨了DOM元素的属性与节点处理方法，并详细讲解了如何通过DOM操作实现页面内容的动态更新。
在Ajax中除了设计数据接口以及和服务通信外，另一个重要的方面就是把这些数据显示在页面中。在Web的发展中，人们并不满足Web页面一提交到浏览器，便再也不能改变的情况，于是出现了DMHTML，他把页面的部分元素设置为对象，通过对这些对象的操作能改变原来静态的HTML的内容，这也是最初的DOM模型。现在，DOM模型已经发展到Level3的水平，W3C全面制定了操作XML，HTML的标准。
1.认识DOM
DOM模型的全称是Document Object Model，即文档对象模型，它定义了操作文档对象的接口。 在这个模型中，一个文档被看成结构化的数据，对于XML就像一棵树的结构，树种每个节点对应一个XML标记，都是一个对象。
在Ajax中，DOM模型其实是最核心的结构，使所有Ajax开发的基础结构。如果没有DOM模型，就没有办法在客户端改变页面的内容，所有的局部刷新，异步请求也就无从实现，熟练掌握DOM模型的相关技术，才算真正掌握了Ajax开发精髓。
2.DOM中元素的属性
元素是DOM描述内容的一个术语，一个元素就是树形结构中的一个节点。元素可以包括属性，子元素，文本值。
| 中文标准名称 | 程序中的名称 | 范例 |
| 元素 | Element | 创建元素的方法CreateElement() |
| 元素的属性 | Attribute | 获取元素属性值getAttribute() |
| 子节点 | ChildNode | 判断是否有子节点hasChildNode() |
| 父节点 | ParentChild | 获取某元素的父节点element.ParentNode |
| 文本值 | TextNode | 添加一个文本值createTextNode() |
| 属性名 | 属性描述 |
| childNodes | 返回当前元素的所有子节点 |
| firstChild | 返回当前元素的首节点 |
| lastChild | 返回当前元素的最后一个节点 |
| parentNode | 返回当前元素的父元素 |
| nextSibling | 返回与当前元素平级的下一个元素 |
| previousSibling | 返回与当前元素平级的上一个元素 |
| nodeValue | 返回当前元素内的文本值 |
3. 处理DOM中的节点
在DOM模型中引用一个节点可以有多种方式，下面分别介绍。
(1)使用document.getElementById()引用指定id的节点。在HTML文档中，每个标记都可以有一个id属性。标准规定：这个id必须是整个文档唯一的。对应这个属性，document提供了getElementById方法来获取这个节点的应用。
(2)使用document.getElementByTagName()引用指定标记名称的节点。这个方法可以用来获取指定标记的元素节点的集合，返回一个数组，包含对这些节点的引用。
(3)引用子节点。每个节点都有一个childNodes集合属性，类型是数组对象，表示该节点的所有子节点的集合。这些子节点按照其在文档中出现的顺序排列，因此可以通过索引来依次访问各个子节点。例如为了引用HTML文档的根节点，可以使用如下代码：
document.childNodes[0];
而<head>和<body>节点是<html>的子节点，可以分别用以下两条语句引用：
document.childNodes[0].childNodes[0]; // 引用<head>节点
document.childNodes[0].childNodes[1]; // 引用<body>节点
除了使用childNodes属性，还有两个属性可以用于引用子节点，分别是：
element.firstChild;
element.lastChild;
它们分别表示第一个和最后一个字节点。
(4)引用父节点。HTML的节点层次是一个树状的结构，除了根节点外，每个节点都仅有一个父节点，可以由parent'Node属性来引用，语法如下：
element.parentNode;
(5)引用兄弟节点。属于同一个文档层次的节点称为兄弟节点。有两个属性可以用于兄弟节点间的相互引用，分别是：
element.nextSibling; //引用上一个兄弟节点
element.previousSibling; //引用下一个兄弟节点
如果该节点没有相应的兄弟节点，则属性返回null。
(6)使用nodeName属性获取节点名称
Node.nodename
对于不同的节点类型，nodename的返回值有所差异：
元素节点：返回标记的名称，例如<span>则返回"span"；
属性节点：返回属性的名称，例如id="span1"则返回"id"；
文本节点： 返回文本的内容
(7)使用nodeType属性获取节点类型
Node.nodeType
对应三种类型的节点，nodeType以数字形式返回它们的类型：
元素节点：返回1
属性节点：返回2
文本节点：返回3
(8)使用nodeValue属性获取节点的值
Node.nodeValue
不同类型的节点有不同的返回值：
元素节点：返回null
属性节点：返回undefined
文本节点：返回文本内容
(9)使用hasChildNodes()方法判断给定节点是否有子节点
(10)使用tagName属性返回元素节点的标记名称
4. 处理属性节点
属性节点作为一个特殊的节点，是依赖元素节点而存在的。
使用setAttribue()方法添加一个属性
elementNode.setAttribute(attributeName,attributeValue)
其中：
elementNode是要添加属性的节点
attributeName是要添加的属性的名称
attributeVale是属性的值
使用getAttribue()方法获取一个属性值
elementNode.getAttribute(attributeName);
其中：
elementNode是要获取属性的节点
attributeName是要获取值的属性的名称
5.处理文本节点
要获取一个节点内的文本，通常可以使用innerHTML属性，例如对于如下的Html代码片段：
<span id="span1"hello>
可以使用如下的JavaScript代码来获取文本的值：
document.getElementById("span1").innerHTML;
同时，这里的“hello”是一个文本节点，因此可以通过通用的节点处理方法来获取他的值：
document.getElementById("span1"),childNodes[0].nodeValue;
在很多情况下，必须使用文本节点来获取一段文本：
<div><img src="xx.gif" alt="xx"/> some text here</div>
对于上面的<div>标记，就包含了两个节点：<img>和内容为“some text here”的文本节点。可以通过下面的代码；
divElement.childNodes[1];
来获取其中文本节点的引用。
扫一扫
927
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
