<html xmlns="http://www.w3.org/1999/xhtml" ><head> <title>AJAX第二个例子</title>
<script type="text/javascript">
var xmlHttp; var bloglist=new Array(); //常见XMLHttpRequest对象 function CreateXMLHttpRequest()
{
if(window.ActiveXObject) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
} else if(window.XMLHttpRequest) { xmlHttp=new XMLHttpReuqest(); } } function StartXMLHttpRequest() { CreateXMLHttpRequest(); xmlHttp.open("GET", "http://blog.csdn.net/wkjs/Rss.aspx", true); xmlHttp.onreadystatechange=onloadreadyState; xmlHttp.send(null); } function onloadreadyState() { if(xmlHttp.readyState==4) { if(xmlHttp.Status==200) { var xmldom=xmlHttp.responseXML; var channel=xmldom.documentElement.childNodes.item(0); var itemlist=channel.childNodes; for(var i=0;i<itemlist.length;i++) { var node=itemlist.item(i); if(node.tagName=="title") { blogtitle.innerHTML=node.text; } if(node.tagName=="link") { bloglink.href=node.text; } if(node.tagName=="description") { blogdescription.innerHTML=node.text; } if(node.tagName=="managingEditor") { managingEditor.innerHTML=node.text; } if(node.tagName=="item") { bloglist[bloglist.length]=node.childNodes; } } showitem(bloglist[0]); } } } function showitem(itemlist) { for(var i=0;i<itemlist.length;i++) { var node=itemlist.item(i); if(node.tagName=="title") { itemtitle.innerHTML=node.text; } if(node.tagName=="link") { itemlink.href=node.text; } if(node.tagName=="description") { description.innerHTML=node.text; } if(node.tagName=="author") { author.innerHTML=node.text; } if(node.tagName=="pubDate") { pubDate.innerHTML=node.text; } } }
</script> <style> span{color:"blue";} span.date{color:"black";display:block;text-align:right;} li{list-style:none} </style></head><body onclick="StartXMLHttpRequest()"> <ul> <li><a id="bloglink"><span id="blogtitle"></span></a></li> <li>By <span id="managingEditor"></span></li> <li><span id="blogdescription"></span></li> <li><a id="itemlink"><span id="itemtitle"></span></a></li> <li>By <span id="author"></span></li> <li><div id="description"></div></li> <li><span id="pubDate" class="date"></span></li> </ul></body></html>|
属姓名 |
描述 |
|
childNodes |
返回当前元素所有子元素的数组 |
|
firstChild |
返回当前元素的第一个下级子元素 |
|
lastChild |
返回当前元素的最后一个子元素 |
|
nextSibling |
返回紧跟在当前元素后面的元素 |
|
nodeValue |
指定表示元素值得读/写属性 |
|
parentNode |
返回元素的父节点 |
|
previousSibling |
返回紧邻当前元素之前的元素 |
用于处理XML文档的DOM元素属性
|
方法名 |
描述 |
|
getElementById(id)(document) |
获取有指定唯一ID属性值文档中的元素 |
|
getElementsByTagName(name) |
返回当前元素中有指定标记名的子元素的数组 |
|
hasChildNames() |
返回一个布尔值，指示元素是否有子元素 |
|
getAttribute(name) |
返回元素的属性值，属性由name指定 |
用于遍历XML文档的DOM元素方法
|
属性/方法 |
描述 |
|
document.createElement(tagname) |
文档对象上的createElement方法可以创建由tagName指定的元素，如果以串div作为参数，就会生成一个div元素 |
|
document.createTextNode(text) |
文档对象的createTextNode方法会创建一个包含静态文本的节点 |
|
<element>.appendChild(childNode) |
appendChild方法将指定的节点增加到当前元素的子节点列表。 |
|
<element>.getAttribute(name) |
这些方法分别获得和设置元素中name属性的值 |
|
<element>.setAttribute(name,value) |
|
|
<element>.insertBdfore(newNode,targetNode) |
这个方法将节点newNode作为当前元素的子节点插入targetNode元素前面 |
|
<element>.removeAttribute(name) |
这个方法从元素中删除属性name |
|
<element>.remoceChild(childNode) |
这个方法从元素中删除子元素childNode |
|
<element>.replaceChuild(newNode,oldNode) |
这个方法将节点oldNode替换为节点newNode |
|
<element>.hasChildnodes() |
这个方法返回一个布尔值，指示元素是否有子元素 |
动态创建内容时所用的W3C DOM属性和方法
