DOM【介紹、HTML中的DOM、XML中的DOM】

時間 2019-11-16

標籤 dom 介紹 html xml 欄目 HTML 简体版

原文原文鏈接

什麼是DOM？

DOM（Document Object Model）文檔對象模型，是語言和平臺的中立接口。。javascript

容許程序和腳本動態地訪問和更新文檔的內容。html

爲何要使用DOM？

Dom技術使得用戶頁面能夠動態地變化，如能夠動態地顯示或隱藏一個元素，改變它們的屬性，增長一個元素等，Dom技術使得頁面的交互性大大地加強。java

HTML的DOM

HTML的DOM是一個內存對象樹，在瀏覽器中只保存一份，HTML的DOM修改HTML的內容會直接反應到瀏覽器中node

API

NODE對象API

在DOM眼中，HTML是由不一樣類型的節點組成的，這些節點都屬性NODE對象。數組

NODE對象有一個nodeType的屬性可用於判斷節點類型瀏覽器

HTML不一樣類型的節點之間都是有聯繫的：安全

位於一個節點之上的節點是該節點的父節點(parent)
一個節點之下的節點是該節點的子節點（children）
同一層次，具備相同父節點的節點是兄弟節點（sibling）
一個節點的下一個層次的節點集合是節點後代(descendant)
父、祖父節點及全部位於節點上面的，都是節點的祖先(ancestor)

因而乎，NODE對象也有訪問節點的屬性和方法服務器

屬性：微信

總的來講就是：獲得節點的信息(節點名字、節點值)以及訪問節點的兄弟、父親dom

方法：

總的來講就是：添加、替換、刪除子節點，判斷是否有子節點，克隆子節點

document

HTML的DOM中咱們提到並大量使用了document這個Javascirpt的內置對象，請注意這個對象僅僅能夠表示HTML的根節點。

document的屬性：

documentElement【能夠獲取獲得<html>這個節點】

document方法：

createElement()【建立一個元素節點】
createComment()【建立註釋】
createAttribute()【建立屬性節點】
createTextNode()【建立文本節點】
getElementById()【經過id獲得該元素節點】
getElementsByTagName()【經過標籤名，獲得全部標籤名的數組】

Element接口

Element表明的是元素節點，是咱們常常用到的一個接口！

Element屬性：

tagName【返回的是元素標籤的大寫名稱】

Element方法：

getAttribute(String name)【獲得屬性的值】
setAttribute(String name,String value)【設置屬性的名稱和值，不存在則建立】
getElementsByTabName()【返回該元素節點的子孫節點的數組】
removeAttribute()【移除屬性】

當咱們設置屬性的時候，咱們不是調用方法來設置，而常常會這樣作：

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

XML的DOM

咱們可能會用XML文件做爲客戶端和服務器的傳輸文件。因而咱們須要學習在JavaScript代碼中經過DOM操做XML文檔

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

裝載XML

客戶端和服務端若是是經過XML文件或者XML字符串進行交互數據的話。那麼，咱們須要裝載服務器的XML文件或XML字符串到JavaScript中的DOM對象。

如今問題就是，IE和fireFox的裝載XML方式是不同的。所以，咱們最好封裝成一個方法來裝載XML。

/**
 * @param flag true表明的是文件，false表明的是字符串
 * @param xmldoc 要封裝成DOM對象的字符串或文件
 * @return 返回的是根節點的元素節點
 *    重點放在高版本上！！
 * */


function loadXML(flag, xmldoc) {

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

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

        //設置爲同步【裝載XML文件成DOM對象，咱們都是同步操做】
        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) {

            //建立對象，解析XML字符串
            objXml = new DOMParser();

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


        } else {

            //因爲安全問題，想要獲得XML文件，須要經過XMLHttpRequest對象來獲取
            objXml = new XMLHttpRequest();

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

            objXml.send(null);

            //返回XML數據
            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

XPATH技術其實咱們已經接觸過了，在講解XML的時候，咱們已經使用過了XPATH技術了。

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

XPATH整體可分爲三種搜索：

絕對路徑搜索（/根節點/子節點）
相對路徑搜索（子節點/子節點）【與絕對路徑搜索的差異就是開頭有無"/"】
全文搜索（//子節點）

若是咱們要查找屬性節點、文本節點、多條件的節點是這樣寫XPATH的

屬性節點：（先找到元素節點/@屬性名）
文本節點：（先找到元素節點/test()）
有條件查詢節點：（先找到元素節點/[條件]）
多條件查詢節點：（先找到元素節點/條件）【兩個條件同時吻合】
多條件查詢節點：（先找到元素節點/[條件]｜先找到元素節點/[條件]）【或關係】

咱們以前使用dom4j的時候，是調用selectSingleNode()和selectNodes()方法來獲取任意深度的節點或多個節點

咱們想要在JavaScript中使用XPATH技術，那麼咱們也實現這兩個方法，調用它就好了！

selectSingleNode()

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

可是，我沒有解決掉該問題。。。。。

下面是JavaScript代碼：

/**
 * 
 * @param xmldoc 表明的是XML的根節點
 * @param xpath 給出的XPATH表達式
 * @return 返回的是對應的節點或多個節點
 * 
 * 
 * 
 */
function selectSingleNode(xmldoc,xpath) {


    //若是是IE,IE10，IE11解決不了....會的人告訴我一聲！！
    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;
    }

}

測試代碼：

<script type="text/javascript" src="loadXML.js" ></script>
    <script type="text/javascript" src="xpath.js" ></script>

    <script type="text/javascript">

        function test() {

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

            var xpathValue = selectSingleNode(file, "//dd");
            var value = xpathValue;

            alert(value);

        }

    </script>

在fireFox，Chrome瀏覽器能夠正常獲取獲得節點

selectNodes()

因爲上面IE問題我到如今尚未解決，因此下面直接測試FireFox瀏覽器了。

等我複習到Jquery的時候，再把這裏的坑填了吧。。。

javaScript代碼：

/**
 *
 * @param xmldoc 表明的是XML的根節點
 * @param xpath 給出的XPATH表達式
 * @return 返回的是節點數組
 */
function selectNodes(xmldoc,xpath) {

    var xpathObj = new XPathEvaluator();

    //若是是多節點，返回的是迭代器
    var iterator = xpathObj.evaluate(xpath, xmldoc, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);

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

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

    return arr;

}

測試代碼：

function test() {

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

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

            alert(value);
        }