AJAX实现一个简单的相册和里头包含一些DOM基础应用-优快云博客

本文介绍了DOM模型中的关键属性和方法，如nodeType、nodeName、nodeValue等，并通过一个实例展示了如何使用JavaScript操作XML文档，包括获取元素、遍历节点及处理属性。

三个文件构成，里头涉及的DOM部分，参阅：http://developer.apple.com.cn/internet/webcontent/dom2i.html

nodeType：这个属性保存一个数字值，对应于结点的类型。元素的 nodeType 属性值为 1，而文本结点的 nodeType 属性值为 3。在操作中如果需要考察几个未知类型结点，则可以用这个属性来区分特定的结点类型。
nodeName：这个属性保存一个字符串。和 nodeType 一样，这个字符串和结点的类型相对应。所有的文本结点的 nodeName 属性值都为“＃text”。对于元素，其 nodeName 属性值包含元素标识的名字。因此一个 HTML image 标识的 nodeName 属性值为“IMG”。
nodeValue：这个属性保存结点的值，如果有的话。元素的 nodeValue 属性值为 null。文本结点的 nodeValue值是该结点包含的实际文本字符串。

再补充一份常用的DOM属性：

用于处理XML文档的DOM元素属性

属性	描述
childNodes	返回当前元素所有子元素的数组
firstChild	返回当前元素的第一个下级子元素
lastChild	返回当前元素的最后一个子元素
nextSibling	返回紧跟在当前元素后面的元素
nodeValue	指定表示元素值的读/写属性
parentNode	返回元素的父节点
previousSibling	返回紧邻当前元素之前的元素

于遍历XML文档的DOM元素方法

方法	描述
getElementById(id)	获取文档中有指定唯一ID属性值的元素
getElementsByTageName(name)	返回当前元素中有指定标记名的子元素的数组
hasChildNodes()	返回一个布尔值，指示元素是否有子元素
getAttribute(name)	返回元素的属性值，属性由name指定

程序如下：

xmlConn.js部分

---------------------------------------------

var XmlHttp;
var temp_url_arr=new Array()
var temp_title_arr=new Array()
var list_arr=new Array()
if (window.XMLHttpRequest) {
  XmlHttp = new XMLHttpRequest()
   if (XmlHttp.overrideMimeType) {
            XmlHttp.overrideMimeType('text/xml');
         }
  } else if (window.ActiveXObject) {
  XmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
/*上面这段话是判断当前浏览器版本,以定义给XmlHttp不同的xmlHttpRequest对象.如果服务器的响应没有XML mime-type header，
某些Mozilla浏览器可能无法正常工作。所以需要XmlHttp.overrideMimeType('text/xml');来修改该header.*/

function getData() {//标准的xmlTHHP
   XmlHttp.onreadystatechange = praseXml;
   XmlHttp.open("GET", "xmldata2.xml", true);
   XmlHttp.send(null);
}

function img_loader(param1){//装载图片
var target_div=document.getElementById('pic');
target_div.innerHTML="<img src="+param1+" border=0>"
}

index.htm部分

-----------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>2Solo.net-Album</title>
<script type="text/javascript" src="xmlConn.js"></script>
<link href="css.css" _fcksavedurl=""css.css"" _fcksavedurl=""css.css"" rel="stylesheet" type="text/css">
</head>
<body onLoad="javascript:getData();">
<br><br><br>   
<div class="tb_main" id="main">
<div class="tb_list" id="catelog">正在载入数据...</div>
<div class="tb_pic" id="pic"></div>
</div>
</body>
</html>

xmldata2.xml部分：

------------------------

<?xml version="1.0" encoding="UTF-8"?>
<data>
<pic>
  <url>pic/1.gif</url>
  <title>图片1</title>
</pic>
<pic>
  <url>pic/2.gif</url>
  <title>图片2</title>
</pic>
<pic>
  <url>pic/3.gif</url>
  <title>图片3</title>
</pic>
<pic>
  <url>pic/4.gif</url>
  <title>图片4</title>
</pic>
</data>