XML的客户端操作（-XML的DOM结构）

1、XML 的DOM组成
XML的DOM：一切都是由 文档 Document 和 节点node组成；
节点node包含：元素Element，属性 Attr，文本 Text。
在解析过程中辅助使用 NodeList（用在节点-元素 集合上） NamedNodeMap（用
在属性集合上）

2、解析流程

3、客户端解析
** 事例XML文件内容
<?xml version="1.0" encoding="UTF-8"?>
    <books>
        <book readBook="_000002 _000003">
            <name>《如何学习DTD》</name>
            <author>张三</author>
            <author>李四</author>
            <price>23.2</price>
            <press>XX出版设</press>
            <no ISBN="_000001" typeNo="tp-312"/>
            <other>
            <name>测试</name>
            </other>
        </book>
        <book readBook="_000003">
            <name>《如何学习JAVA》</name>
            <author>王二</author>
            <price>23.2</price>
            <press>XX出版设</press>
            <no ISBN="_000002" typeNo="tp-312"/>
        </book>
        <book>
            <name>《如何学习HTML》</name>
            <author>麻子</author>
            <price>23.2</price>
            <press>XX出版设</press>
            <no ISBN="_000003" typeNo="tp-312"/>
        </book>
    </books>
//Chrome浏览器有很强的安全性，不允许本地操作，可以使用下面的方式进行加载
<script type="text/javascript">
    var root;
    try{
        var doc = document.implementation.createDocument("", "", null);
        doc.async = false;//设置xml文档的加载方式（同步、异步），默认是异步
        doc.load("book.xml");
        root = doc.documentElement
    }catch (e){
        var xmlhttp = new window.XMLHttpRequest();
        xmlhttp.open("GET","book.xml",false);
        xmlhttp.send(null);
        root = xmlhttp.responseXML.documentElement;
    }
    console.log(root.nodeName);
</script>
A、节点 的 解析流程
<script type="text/javascript">
    /* 早期的IE浏览创建XML DOM 对象的方式 */
    /* var doc =new ActiveXObject("Microsoft.XMLDOM"); */
    /* 对除IE浏览器提供的创建XML DOM 对象的方式 */
    /* doc 为创建出来的 XML DOM 对象 ，document为HTML的文档对象 */
    var doc = document.implementation.createDocument("", "", null);
    /* 建议在加载之前写一个属性设置 */
    doc.async = false;//设置xml文档的加载方式（同步、异步），默认是异步
    /* 加载XML文件 */
    doc.load("book.xml");
    /* 加载完毕程序继续 */
    /* 获取根元素 使用提供的固定获取方法*/
    var root = doc.documentElement;
    /* 输出节点名称--根节点也是一个节点 */
    console.log(root.nodeName);
    /* 获取子节点的nodeList 集合 */
    var elements = root.childNodes;
    //console.log(elements);
    /* 循环节点 */
    for(var i=0;i<elements.length;i++){
        var elem = elements[i];
        /* console.log(elem); */
        /* 判断循环到的节点是node还是文本 */
        var elem = elements[i];
        /*
        因为在实际的XML 文件解析的使用，同级的节点存在多个，
        需要分别对不同的节点进行解析，所以我们一般会在添加节点的匹配条件
        */
        if(elem.nodeType==1&&elem.nodeName=="book"){
            //console.log(elem);
            /* 获取节点中的子节点集合 */
            var subElems = elem.childNodes;
            /* 循环判断输出 */
            for(var i=0;i<subElems.length;i++){
                if(subElems[i].nodeType==1&&subElems[i].nodeName=="name"){
                    /* 在XML和 HTML中认为 文本 也是一个节点 */
                    //console.log(subElems[i].nodeValue);
                    /* 节点中的值，可以通过下面三种方式进行获取 */
                    //console.log(subElems[i].childNodes[0].nodeValue);
                    //console.log(subElems[i].firstChild.nodeValue);
                    console.log(subElems[i].firstChild.data);
                }else if(subElems[i].nodeType==1&&subElems[i].nodeName=="author"){
                    console.log(subElems[i]);
                }
            }
        }
    }
    console.log("---------------------------------");
    /* 通过 .getElementsByTagName()解析 */
    var elems = root.getElementsByTagName("book");
    /*
    在XML解析是不适合使用 for in 循环
    for in 循环在循环时会将方法和属性一起循环出来
    实际解析时我们只需要值
    */
    /* for(var index in elems){
    console.log(elems[index])
    if(elems[index].nodeType==1){
    var childElems = elems[index].getElementsByTagName("name");
    console.log(childElems[0].firstChild.nodeValue);
    }
    } */
    for(var i=0;i<elems.length;i++){
    console.log(elems[i]);
    //.getElementsByTagName 会获取到全部的子孙元素中名字为name的所有标签
    var childElems = elems[i].getElementsByTagName("name");
    //console.log(childElems[0].firstChild.nodeValue);
    /* 取出所有的节点名称 */
    for(var j=0;j<childElems.length;j++){
    /*
    通过.parentNode 方法获取父节点
    判断是否为当前节点的父节点
    */
    if(childElems[j].parentNode==elems[i]){
    console.log(childElems[j].firstChild.nodeValue);
    }
    }
    }
</script>
B、属性的解析
<script type="text/javascript">
    var doc = document.implementation.createDocument("", "", null);
    doc.async = false;//设置xml文档的加载方式（同步、异步），默认是异步
    doc.load("book.xml");
    var root = doc.documentElement;
    /* 获取book 节点 */
    var eleBooks = root.getElementsByTagName("book");
    /* 获取所有 book 节点 readBook 属性 */
    for(var i=0;i<eleBooks.length;i++){
        var attr = eleBooks[i].getAttribute("readBook");
        /* 没有该属性的时候 返回的是null值 */
        console.log(attr);
    }
    console.log("--------------------")
    /* 获取所有 no 节点的所有属性 */
    var eleNo = root.getElementsByTagName("no");
    for(var i=0;i<eleNo.length;i++){
        /* 返回的是 namedNodeName,实际中 在JS中集合都是数组表现形式 */
        var attrs = eleNo[i].attributes;
        for(var j=0;j<attrs.length;j++){
        //console.log(attrs[j].nodeName+":"+attrs[j].nodeValue);
        console.log(attrs[j].name+":"+attrs[j].value);
    }
}
</script>
*****综合案例
xml文件
<?xml version="1.0" encoding="UTF-8"?>
    <students>
        <student id="00001">
            <name>张三</name>
            <age>20</age>
            <sex>男</sex>
        </student>
        <student id="00002">
            <name>李四</name>
            <age>22</age>
            <sex>男</sex>
        </student>
        <student id="00003">
            <name>芳芳</name>
            <age>20</age>
            <sex>女</sex>
        </student>
        <student id="00004">
            <name>小丽</name>
            <age>18</age>
            <sex>女</sex>
        </student>
    </students>
解析显示
<!DOCTYPE html>
<html>
    <head>
    <title>05.html</title>
    <meta charset="utf-8">
    <style type="text/css">
        table {
            width: 800px;
            border-collapse: collapse;
        }
        td{
            border: 1px solid black;
            padding: 5px;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.9.0.js"></script>
    <script type="text/javascript">
        $(function(){
            var doc = document.implementation.createDocument("", "", null);
            doc.async=false;
            doc.load("students.xml");
            var root = doc.documentElement;
            var students = root.getElementsByTagName("student");
            var tbObj = $("#tb");
            console.log(tbObj);
            for(var i=0;i<students.length;i++){
                var id = students[i].getAttribute("id");
                var name = students[i].getElementsByTagName("name")[0]
                .firstChild.nodeValue;
                var age = students[i].getElementsByTagName("age")[0]
                .firstChild.nodeValue;
                var sex = students[i].getElementsByTagName("sex")[0]
                .firstChild.nodeValue;
                var tr = $("<tr>");
                $("<td>").html(id).appendTo(tr);
                $("<td>").html(name).appendTo(tr);
                $("<td>").html(age).appendTo(tr);
                $("<td>").html(sex).appendTo(tr);
                tbObj.append(tr);
            }
        });
    </script>
    </head>
<body>
<table>
<thead>
<tr>
<td>编号</td>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</tr>
</thead>
<tbody id="tb">
</tbody>
</table>
</body>
</html>

4、客户端写操作
<!DOCTYPE html>
<html>
    <head>
        <title>06.html</title>
        <meta charset="utf-8">
        <script type="text/javascript">
            var doc = document.implementation.createDocument("", "", null);
            //1、创建根节点
            var root = doc.createElement("Root");
            //只有将节点添加到doc中才是根节点。但XML中有且仅有一个根节点
            doc.appendChild(root);
            //2、创建子节点
            var sub = doc.createElement("sub");
            root.appendChild(sub);
            //3、为字节点添加属性
            sub.setAttribute("id","0001");
            //4、创建孙节点
            var elem = doc.createElement("name");
            sub.appendChild(elem);
            //5、为孙节点添加文本内容
            var txt = doc.createTextNode("tom");
            elem.appendChild(txt);
            //因为 W3Cshool 提供个展示XML文件的 .xml方法只能IE使用
            //所以MAC 系统 目前只能通过读取的方式进行展示验证
            console.log(doc);
        </script>
    </head>
    <body>
    </body>
</html>