摘要：的的是一個(gè)內(nèi)存對(duì)象樹(shù)，在瀏覽器中只保存一份，的修改的內(nèi)容會(huì)直接反應(yīng)到瀏覽器中對(duì)象在眼中，是由不同類型的節(jié)點(diǎn)組成的，這些節(jié)點(diǎn)都屬性對(duì)象。那么，我們需要裝載服務(wù)器的文件或字符串到中的對(duì)象。現(xiàn)在問(wèn)題就是，和的裝載方式是不一樣的。

DOM（Document Object Model）文檔對(duì)象模型，是語(yǔ)言和平臺(tái)的中立接口。。

允許程序和腳本動(dòng)態(tài)地訪問(wèn)和更新文檔的內(nèi)容。

Dom技術(shù)使得用戶頁(yè)面可以動(dòng)態(tài)地變化，如可以動(dòng)態(tài)地顯示或隱藏一個(gè)元素，改變它們的屬性，增加一個(gè)元素等，Dom技術(shù)使得頁(yè)面的交互性大大地增強(qiáng)。

HTML的DOM是一個(gè)內(nèi)存對(duì)象樹(shù)，在瀏覽器中只保存一份，HTML的DOM修改HTML的內(nèi)容會(huì)直接反應(yīng)到瀏覽器中

在DOM眼中，HTML是由不同類型的節(jié)點(diǎn)組成的，這些節(jié)點(diǎn)都屬性NODE對(duì)象。

NODE對(duì)象有一個(gè)nodeType的屬性可用于判斷節(jié)點(diǎn)類型

HTML不同類型的節(jié)點(diǎn)之間都是有聯(lián)系的：

位于一個(gè)節(jié)點(diǎn)之上的節(jié)點(diǎn)是該節(jié)點(diǎn)的父節(jié)點(diǎn)(parent)

一個(gè)節(jié)點(diǎn)之下的節(jié)點(diǎn)是該節(jié)點(diǎn)的子節(jié)點(diǎn)（children）

同一層次，具有相同父節(jié)點(diǎn)的節(jié)點(diǎn)是兄弟節(jié)點(diǎn)（sibling）

一個(gè)節(jié)點(diǎn)的下一個(gè)層次的節(jié)點(diǎn)集合是節(jié)點(diǎn)后代(descendant)

父、祖父節(jié)點(diǎn)及所有位于節(jié)點(diǎn)上面的，都是節(jié)點(diǎn)的祖先(ancestor)

于是乎，NODE對(duì)象也有訪問(wèn)節(jié)點(diǎn)的屬性和方法

屬性：

總的來(lái)說(shuō)就是：得到節(jié)點(diǎn)的信息(節(jié)點(diǎn)名字、節(jié)點(diǎn)值)以及訪問(wèn)節(jié)點(diǎn)的兄弟、父親

方法：

總的來(lái)說(shuō)就是：添加、替換、刪除子節(jié)點(diǎn)，判斷是否有子節(jié)點(diǎn)，克隆子節(jié)點(diǎn)

HTML的DOM中我們提到并大量使用了document這個(gè)Javascirpt的內(nèi)置對(duì)象，請(qǐng)注意這個(gè)對(duì)象僅僅可以表示HTML的根節(jié)點(diǎn)。

document的屬性：

documentElement【可以獲取得到這個(gè)節(jié)點(diǎn)】

document方法：

createElement()【創(chuàng)建一個(gè)元素節(jié)點(diǎn)】

createComment()【創(chuàng)建注釋】

createAttribute()【創(chuàng)建屬性節(jié)點(diǎn)】

createTextNode()【創(chuàng)建文本節(jié)點(diǎn)】

getElementById()【通過(guò)id得到該元素節(jié)點(diǎn)】

getElementsByTagName()【通過(guò)標(biāo)簽名，得到所有標(biāo)簽名的數(shù)組】

Element代表的是元素節(jié)點(diǎn)，是我們經(jīng)常用到的一個(gè)接口！

Element屬性：

tagName【返回的是元素標(biāo)簽的大寫(xiě)名稱】

Element方法：

getAttribute(String name)【得到屬性的值】

setAttribute(String name,String value)【設(shè)置屬性的名稱和值，不存在則創(chuàng)建】

getElementsByTabName()【返回該元素節(jié)點(diǎn)的子孫節(jié)點(diǎn)的數(shù)組】

removeAttribute()【移除屬性】

當(dāng)我們?cè)O(shè)置屬性的時(shí)候，我們不是調(diào)用方法來(lái)設(shè)置，而經(jīng)常會(huì)這樣做：

    var input = document.createElement("input");
    input.value = "aa";
    input.name = "bb";

我們可能會(huì)用XML文件作為客戶端和服務(wù)器的傳輸文件。于是我們需要學(xué)習(xí)在JavaScript代碼中通過(guò)DOM操作XML文檔

XML和HTML的API是十分類似的，這里就不贅述了。

客戶端和服務(wù)端如果是通過(guò)XML文件或者XML字符串進(jìn)行交互數(shù)據(jù)的話。那么，我們需要裝載服務(wù)器的XML文件或XML字符串到JavaScript中的DOM對(duì)象。

現(xiàn)在問(wèn)題就是，IE和fireFox的裝載XML方式是不一樣的。因此，我們最好封裝成一個(gè)方法來(lái)裝載XML。

/**
 * @param flag true代表的是文件，false代表的是字符串
 * @param xmldoc 要封裝成DOM對(duì)象的字符串或文件
 * @return 返回的是根節(jié)點(diǎn)的元素節(jié)點(diǎn)
 *    重點(diǎn)放在高版本上！！
 * */


function loadXML(flag, xmldoc) {

    //瀏覽器是低版本的IE
    var objXml;
    if (window.ActiveXObject) {

        //是IE的話，有兩種方式來(lái)創(chuàng)建ActiveXObject對(duì)象
        var name = ["MSXML2.DOMDocument", "Miscrosoft.XmlDom"];
        for (var i = 0; i < name.length; i++) {
            objXml = new ActiveXObject(name);
            break;
        }

        //設(shè)置為同步【裝載XML文件成DOM對(duì)象，我們都是同步操作】
        objXml.async = false;

        //如果是字符串
        if (flag == false) {
            objXml.loadXML(xmldoc);
        } else {
            //如果是文件
            objXml.load(xmldoc)
        }
        return objXml.documentElement;


        //瀏覽器是fireFox或者高版本的IE
    } else if (document.implementation.createDocument) {
        //字符串
        if (flag == false) {

            //創(chuàng)建對(duì)象，解析XML字符串
            objXml = new DOMParser();

            //解析到根節(jié)點(diǎn)
            var root = objXml.parseFromString(xmldoc, "text/xml");
            return  root.documentElement;


        } else {

            //由于安全問(wèn)題，想要得到XML文件，需要通過(guò)XMLHttpRequest對(duì)象來(lái)獲取
            objXml = new XMLHttpRequest();

            //同步
            objXml.open("GET", "1.xml", false);

            objXml.send(null);

            //返回XML數(shù)據(jù)
            return objXml.responseXML.documentElement;

        }
        //解析不了啦
    } else {
        alert("解析不了了");
    }

}

如果有需要就加這段功能吧！

function removeBlank(xml) {
    if (xml.childNodes.length > 1) {
        for (var loopIndex = 0; loopIndex < xml.childNodes.length; loopIndex++) {
            var currentNode = xml.childNodes[loopIndex];
            if (currentNode.nodeType == 1) {
                removeBlank(currentNode);
            }
            if (((/^s+$/.test(currentNode.nodeValue))) && (currentNode.nodeType == 3)) {
                xml.removeChild(xml.childNodes[loopIndex--]);
            }
        }
    }
}

XPATH技術(shù)其實(shí)我們已經(jīng)接觸過(guò)了，在講解XML的時(shí)候，我們已經(jīng)使用過(guò)了XPATH技術(shù)了。

可以參考我之前的XML博文：http://blog.csdn.net/hon_3y/article/details/55049184

XPATH總體可分為三種搜索：

絕對(duì)路徑搜索（/根節(jié)點(diǎn)/子節(jié)點(diǎn)）

相對(duì)路徑搜索（子節(jié)點(diǎn)/子節(jié)點(diǎn)）【與絕對(duì)路徑搜索的差別就是開(kāi)頭有無(wú)"/"】

全文搜索（//子節(jié)點(diǎn)）

如果我們要查找屬性節(jié)點(diǎn)、文本節(jié)點(diǎn)、多條件的節(jié)點(diǎn)是這樣寫(xiě)XPATH的

屬性節(jié)點(diǎn)：（先找到元素節(jié)點(diǎn)/@屬性名）

文本節(jié)點(diǎn)：（先找到元素節(jié)點(diǎn)/test()）

有條件查詢節(jié)點(diǎn)：（先找到元素節(jié)點(diǎn)/[條件]）

多條件查詢節(jié)點(diǎn)：（先找到元素節(jié)點(diǎn)/條件）【兩個(gè)條件同時(shí)吻合】

多條件查詢節(jié)點(diǎn)：（先找到元素節(jié)點(diǎn)/[條件]｜先找到元素節(jié)點(diǎn)/[條件]）【或關(guān)系】

我們之前使用dom4j的時(shí)候，是調(diào)用selectSingleNode()和selectNodes()方法來(lái)獲取任意深度的節(jié)點(diǎn)或多個(gè)節(jié)點(diǎn)

我們想要在JavaScript中使用XPATH技術(shù)，那么我們也實(shí)現(xiàn)這兩個(gè)方法，調(diào)用它就行了！

IE10,IE11下無(wú)法使用selectSingleNode()方法。解決參考：http://wenda.so.com/q/1458453513726662

但是，我沒(méi)有解決掉該問(wèn)題。。。。。

下面是JavaScript代碼：

/**
 * 
 * @param xmldoc 代表的是XML的根節(jié)點(diǎn)
 * @param xpath 給出的XPATH表達(dá)式
 * @return 返回的是對(duì)應(yīng)的節(jié)點(diǎn)或多個(gè)節(jié)點(diǎn)
 * 
 * 
 * 
 */
function selectSingleNode(xmldoc,xpath) {


    //如果是IE,IE10，IE11解決不了....會(huì)的人告訴我一聲！！
    if(navigator.userAgent.indexOf(".NET")>0) {
        var value = xmldoc.selectNodes(xpath)
        return value;

    }else {

        //如果是fireFox
        var xpathObj = new XPathEvaluator();
        var value = xpathObj.evaluate(xpath, xmldoc, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);

        return value.singleNodeValue;
    }

}
 

測(cè)試代碼：

在fireFox，Chrome瀏覽器可以正常獲取得到節(jié)點(diǎn)

由于上面IE問(wèn)題我到現(xiàn)在還沒(méi)有解決，所以下面直接測(cè)試FireFox瀏覽器了。

等我復(fù)習(xí)到Jquery的時(shí)候，再把這里的坑填了吧。。。

javaScript代碼：

/**
 *
 * @param xmldoc 代表的是XML的根節(jié)點(diǎn)
 * @param xpath 給出的XPATH表達(dá)式
 * @return 返回的是節(jié)點(diǎn)數(shù)組
 */
function selectNodes(xmldoc,xpath) {

    var xpathObj = new XPathEvaluator();

    //如果是多節(jié)點(diǎn)，返回的是迭代器
    var iterator = xpathObj.evaluate(xpath, xmldoc, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);

    //把迭代器的數(shù)據(jù)寫(xiě)到數(shù)組中
    var arr = new Array();

    var node;
    while ((node=iterator.iterateNext())!=null) {
        arr.push(node);
    }

    return arr;

}
 

測(cè)試代碼：

        function test() {

            var file = loadXML(true, "1.xml");

            var xpathValue = selectNodes(file, "http://aa");
            var value = xpathValue;

            alert(value);
        }

效果：

如果文章有錯(cuò)的地方歡迎指正，大家互相交流。習(xí)慣在微信看技術(shù)文章，想要獲取更多的Java資源的同學(xué)，可以關(guān)注微信公眾號(hào):Java3y