ajax与DOM的使用,利用Ajax操作DOM

当然，这里已经假设你了解什么是DOM了。DOM

代码中最常用的任务就是在页面的 DOM 树中导航。比方说，可以通过其

“id” 属性定位一个 form，然后开始处理那个 form

中内嵌的元素和文本。其中可能包含文字说明、输入字段的标签、真正的

input 元素，以及其他 HTML 元素(如 img)和链接(a 元素)。

DOM 节点的属性主要有：

nodeName

提供节点的名称

nodeValue

提供节点的 “值”

parentNode

返回节点的父节点。每个元素、属性和文本都有一个父节点。

childNodes

节点的孩子节点列表(一个数组)。对于

HTML，该列表仅对元素有意义，文本节点和属性节点都没有孩子。

firstChild

childNodes 列表中第一个节点。

lastChild

childNodes 列表中的最后一个节点。

previousSibling

返回当前节点之前的节点。它返回当前节点的父节点的 childNodes

列表中位于该节点前面的那个节点

nextSibling

类似于 previousSibling 属性，返回父节点的 childNodes

列表中的下一个节点。

attributes

仅用于元素节点，返回元素的属性列表。

文档节点 实际上并不是 HTML(或

XML)页面中的一个元素而是页面本身。在 JavaScript 中，可以使用关键字

document 访问文档节点

createElement(elementName)

使用给定的名称创建一个元素。

createTextNode(text)

使用提供的文本创建一个新的文本节点。

createAttribute(attributeName)

用提供的名称创建一个新属性。

与属性处理有关的方法：

getAttribute(name)

返回名为 name 的属性值。

removeAttribute(name)

删除名为 name 的属性。

setAttribute(name, value)

创建一个名为 name 的属性并将其值设为

value。

getAttributeNode(name)

返回名为 name 的属性节点。

removeAttributeNode(node)

删除与指定节点匹配的属性节点。

与查找嵌套元素有关的方法：

getElementsByTagName_r(elementName)

返回具有指定名称的元素节点列表。

讲了这么半天理论，还是来个实例吧，接下来要做一个关于房地产的小demo。

先看效果：

点击查找后：

重新选择一下价格后：

现在看一下代码吧

上面代码我认为完全就是一个模板了，呵呵，注意handleStateChange()函数中调用的clearPreviousResults()函数和parseResults()，这是本例的关键，其中涉及到了操作DOM的主要方法。

下面解析一下clearPreviousResults()，他的功能是清除一下页面中已经生成的表格和一些页面元素。

function clearPreviousResults(){

var header =

document.getElementByIdx("header");//获得页面中id为header的元素

if(header.hasChildNodes())

{

header.removeChild(header.childNodes[0]);//清楚header元素的子节点，注意，即使是纯文本(字符串)也是子节点 }

var tableBody =

document.getElementByIdx("resultsBody");//获得页面中id为resultsBody的元素

while( tableBody.childNodes.length > 0 ){

tableBody.removeChild(tableBody.childNodes[0]);//清除id为resultsBody的节点的子节点

}

}

完成了上次信息的清除，可以生成这次信息了，详看parseResults()

function parseResults(){

var results =

xmlHttp.responseXML;//results是服务器端返回xml结果的解析。呆会就会见到这是一个什么样的xml了。

var

property = null;

var address = "";

var price = "";

var comment = "";

var properties =

results.getElementsByTagName_r("property");

for(var i=0; i

property =

properties[i];

//获得xml中各property的属性值

address

=

property.getElementsByTagName_r("address")[0].firstChild.nodeValue;

price =

property.getElementsByTagName_r("price")[0].firstChild.nodeValue;

comment =

property.getElementsByTagName_r("comment")[0].firstChild.nodeValue;

addTagRow(address,

price, comment);

//生成一列，下面可见addTagRow的定义

}

var header =

document.createElement("h2");//生成一元素

var

headerText = document.createTextNode("查询结果:");

header.appendChild(headerText);

document.getElementByIdx("header").appendChild(header);//把生成的元素加入id为header的节点中。

document.getElementByIdx("resultsTable").setAttribute("border",

"1");//设置id为resultsTable的节点的属性border的值}

这两个函数用来为结果生成table的一行。

下面是body中的定义

注意，为了跨平台，最好在table下定义

标签。

该看看servlet了

发布一下，就可以看到最开始那样地效果了

当然，还有个问题，就是javascript的调试了，没办法，敲代码时留心点吧。OK