现在的位置: 首页 > 综合 > 正文

一步一步理解XMLDOM(一)

2013年03月22日 ⁄ 综合 ⁄ 共 2302字 ⁄ 字号 评论关闭

一、XML DOM中的节点类型
XML DOM与HTML DOM中的节点类型相似
1、整个XML文档是一个文档节点(Document)
2、每个XML标签是一个元素节点(Element)
3、在XML标签中的文本是一个文本节点(Text)
4、在XML标签中的每个属性是一个属性节点(Attr)
5、XML文档中的注释是一个注释节点(Comment)
示例:
         <item       name="hello" >你好</item>
        element       attr              text

二、解析XML文件
1、首先创建XMLDOM对象
IE中使用        
  new ActiveXObject("Microsoft.XMLDOM");
Firefox,Opera        
  document.implementation.createDocument("","",null);
Chrome,Safari,Firefox,Opera等
  var xhr = new XMLHttpRequest();
  xhr.open("GET","XMLFileNane.xml",false);
  xhr.send(null);
  xhr.responseXML;
由于Chrome由于其安全机制限制,不能读取本地文件。
2、其次,使用Ajax技术Get方式处理,屏蔽不同浏览器之间的差异。
(1)创建XMLHttpRequest对象
        function createXHR() {
            return window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
        }
(2)创建XMLDOM对象
        function createXMLDOM(xmlfile) {
            var xhr = new createXHR();
            var xmlDom = null;
            xhr.open("GET", xmlfile, false);
            xhr.send();
            xhr.onreadyStateChange = new function () {
                if (4 == xhr.readyState && 200 == xhr.status) {
                    xmlDom = xhr.responseXML;
                }
            }
            return xmlDom;
        }

View Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>一步一步理解XMLDOM(一)---http://www.cnblogs.com/kuikui</title>
<script type="text/javascript">
function createXHR() {
return window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
}

function createXMLDOM(xmlfile) {
var xhr = new createXHR();
var xmlDom = null;
xhr.open("GET", xmlfile, false);
xhr.send();
xhr.onreadyStateChange = new function () {
if (4 == xhr.readyState && 200 == xhr.status) {
xmlDom = xhr.responseXML;
}
}
return xmlDom;
}

var xmlDom = new createXMLDOM("XMLFile.xml");
var rootNode = xmlDom.documentElement;
document.write("根节点的名称为:", rootNode.nodeName, "<br/>");
document.write("根节点的值为:", rootNode.nodeValue, "<br/>");
document.write("根节点的类型为:", rootNode.nodeType, "<br/>");

var subNodes = rootNode.childNodes;
for (var i = 0; i < subNodes.length; i++) {
document.write("第", i + 1, "个子节点的名称为:", subNodes[i].nodeName, "<br/>");
document.write("第", i + 1, "个子节点的值为:", subNodes[i].nodeValue, "<br/>");
document.write("第", i + 1, "个子节点的类型为:", subNodes[i].nodeType, "<br/>");
}
</script>
</head>
<body>
</body>
</html>

三、新年祝福
     这是年前的最后一篇文章了,马上就要过年了,祝福所有人平平安安,幸福美满,阖家欢乐。。。
    

抱歉!评论已关闭.