Ajax的基础构架：DOM模型

来源：互联网发布：软件研发工作流程编辑：程序博客网时间：2024/05/01 22:36

在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描述内容的一个术语，一个元素就是树形结构中的一个节点。元素可以包括属性，子元素，文本值。

DOM中数据的标准名称及规范中文标准名称程序中的名称范例元素 Element 创建元素的方法CreateElement() 元素的属性 Attribute 获取元素属性值getAttribute() 子节点 ChildNode 判断是否有子节点hasChildNode() 父节点 ParentChild 获取某元素的父节点element.ParentNode 文本值 TextNode 添加一个文本值createTextNode()

DOM中元素的属性

属性名属性描述 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代码片段：

可以使用如下的JavaScript代码来获取文本的值：

document.getElementById("span1").innerHTML;

同时，这里的“hello”是一个文本节点，因此可以通过通用的节点处理方法来获取他的值：

document.getElementById("span1"),childNodes[0].nodeValue;

在很多情况下，必须使用文本节点来获取一段文本：

对于上面的<div>标记，就包含了两个节点：<img>和内容为“some text here”的文本节点。可以通过下面的代码；

divElement.childNodes[1];

来获取其中文本节点的引用。