Question

JS如何遍历有层叠结构的XML？

<IS>
<year time="2014">
<major name="Computer Science">
<class>1401</class>
<class>1402</class>
<class>1403</class>
<class>1404</class>
</major>
<major name="Communication Engineering">
<class>1405</class>
<class>1406</class>
<class>1407</class>
<class>1408</class>
</major>
</year>

<year time="2013">
<major name="Computer Science">
<class>1301</class>
<class>1302</class>
<class>1303</class>
<class>1304</class>
</major>
<major name="Communication Engineering">
<class>1305</class>
<class>1306</class>
<class>1307</class>
<class>1308</class>
</major>
</year>
</IS>

如何遍历这个XML。
一般的getElementByTagName()获得的信息都是平行的，有没有类似"major".getElementByTagName("class")的方法，获取某个父元素节点下的子元素节点？

Answer 1

首先加载xml字符串的方法：

<script type='text/javascript'>
    loadXML = function(xmlString){
        var xmlDoc=null;
        //判断浏览器的类型
        //支持IE浏览器 
        if(!window.DOMParser && window.ActiveXObject){   //window.DOMParser 判断是否是非ie浏览器
            var xmlDomVersions = ['MSXML.2.DOMDocument.6.0','MSXML.2.DOMDocument.3.0','Microsoft.XMLDOM'];
            for(var i=0;i<xmlDomVersions.length;i++){
                try{
                    xmlDoc = new ActiveXObject(xmlDomVersions[i]);
                    xmlDoc.async = false;
                    xmlDoc.loadXML(xmlString); //loadXML方法载入xml字符串
                    break;
                }catch(e){
                }
            }
        }
        //支持Mozilla浏览器
        else if(window.DOMParser && document.implementation && document.implementation.createDocument){
            try{
                /* DOMParser 对象解析 XML 文本并返回一个 XML Document 对象。
                 * 要使用 DOMParser，使用不带参数的构造函数来实例化它，然后调用其 parseFromString() 方法
                 * parseFromString(text, contentType) 参数text:要解析的 XML 标记 参数contentType文本的内容类型
                 * 可能是 "text/xml" 、"application/xml" 或 "application/xhtml+xml" 中的一个。注意，不支持 "text/html"。
                 */
                domParser = new  DOMParser();
                xmlDoc = domParser.parseFromString(xmlString, 'text/xml');
            }catch(e){
            }
        }
        else{
            return null;
        }

        return xmlDoc;
    }
</script>

然后遍历xml：

window.onload = function(){
		var text = document.getElementById('aaa').value;
		var xmldoc=loadXML(text);
		 var elements = xmldoc.getElementsByTagName("major");
		 for (var i = 0; i < elements.length; i++) {
			var value = elements[i].getElementsByTagName("class")[0].firstChild.nodeValue;
			alert(value);					
		}
	}

html:

<textarea id="aaa">
<IS>
    <year time="2014">
        <major name="Computer Science">
            <class>1401</class>
            <class>1402</class>
            <class>1403</class>
            <class>1404</class>
        </major>
        <major name="Communication Engineering">
            <class>1405</class>
            <class>1406</class>
            <class>1407</class>
            <class>1408</class>
        </major>
    </year>
 
    <year time="2013">
        <major name="Computer Science">
            <class>1301</class>
            <class>1302</class>
            <class>1303</class>
            <class>1304</class>
        </major>
        <major name="Communication Engineering">
            <class>1305</class>
            <class>1306</class>
            <class>1307</class>
            <class>1308</class>
        </major>
    </year>
</IS>
</textarea>

Answer 2

如果要通用的遍历的话，js不是太好用，毕竟他不是完全的面向对象。如果在知道结构的情况下遍历倒是不难，建议用jquery
完全可以var major=$("year[time='2014']>major:eq(0));
var class1401=$(major).children("class").eq(0);
这样就找到了1401那个class了

追问

你好，首先谢谢你的回答。

jQuery用的不多，听你说的那个意思应该是找出1401对应的，但我想要的是显示整个XML到HTML上。显示完后做成复选框的样子，一层一层展开，当然那就是后期的工作了。

有什么好办法能全部显示出XML众的各个节点内容吗？

追答

你的xml的数据来源在哪？直接在html里面么？还是有个xml文件从后台读取的？如果是从后台读取的，建议你在后台进行处理。比如你用java可以考虑用jdom或者sax。

追问

XML是自己定义的，在本地。用JS载入后，写标签显示在HTML里，比如：
/***********JS载入*************/
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async="false";
xmlDoc.load("UI.xml");

追答

刚才试了一下你这个方法，应该只在IE里面有效。如果在生产环境的话不建议你用。如果是学生作业的话，到也无所谓了。你这个xmlDoc本身就是个对象，load之后，进行了赋值，里面有childnodes这个属性，应该可以从里面把DOM tree拿出来。你在ie9以上的版本下，按f12，有web工具 ，自己跟一下debug就知道了

追问

恩呢，Chrome不行，FF可以用另一种载入方法。多谢了，问题已经解决了，是在每一层循环里调用getElementByTagName()就好了，3层循环解决问题。