天天看點

DOM(二)——XML DOM

        DOM在XML中關于節點,屬性,方法等的概念,知識都是非常相似的,這裡不再贅述,這裡重點通過幾個執行個體運用一下!

      我們先引進一個XML檔案books.xml,以後操作都在它上進行:(注意觀察XML和HTML的不同處和相同處)

<span style="font-size:18px;"><?xml version="1.0" encoding="ISO-8859-1"?>  

<bookstore>  

<book category="children">  

  <title lang="en">Harry Potter</title>   

  <author>J K. Rowling</author>   

  <year>2005</year>   

  <price>29.99</price>   

</book>  

<book category="cooking">  

  <title lang="en">Everyday Italian</title>   

  <author>Giada De Laurentiis</author>   

  <price>30.00</price>   

<book category="web">  

  <title lang="en">Learning XML</title>   

  <author>Erik T. Ray</author>   

  <year>2003</year>   

  <price>39.95</price>   

  <title lang="en">XQuery Kick Start</title>   

  <author>James McGovern</author>   

  <author>Per Bothner</author>   

  <author>Kurt Cagle</author>   

  <author>James Linn</author>   

  <author>Vaidyanathan Nagarajan</author>   

  <price>49.99</price>   

</bookstore>  

</span>  

    一,解析XML檔案,大多數浏覽器都内建了讀取和操作XML的解析器,通過解析器把XML轉換為JavaScript可存取的對象。但是這裡的以IE為核心的和FireFox或其他的浏覽器是不同的,這裡看個全面的加載解析XML檔案的例子:(以上邊books.xml進行實驗)

<span style="font-size:18px;"><html>  

    <body>  

        <script type="text/javascript">  

            try //Internet Explorer  

              {  

                      xmlDoc=new ActiveXObject("Microsoft.XMLDOM");//建立IE浏覽器的XML文檔對象  

              }  

            catch(e)  

                  try //Firefox, Mozilla, Opera, etc.  

                    {  

                          xmlDoc=document.implementation.createDocument("","",null);//建立空的XML文檔對象   

                    }  

                  catch(e) {alert(e.message)}  

               }  

            try   

                  xmlDoc.async=false;//關閉異步加載,這樣可確定在文檔完整加載之前,解析器不會繼續執行腳本   

                  xmlDoc.load("/books.xml");//加載books.xml檔案。注意:loadXML() 方法用于加載字元串(文本),而 load() 用于加載檔案   

                  document.write("xmlDoc is loaded, ready for use");//表明建立成功  

            catch(e) {alert(e.message)}//建立失敗,給出資訊提示  

        </script>  

    </body>  

</html>  

    二,主要是對節點的各種操作了,主要就是一些屬性和方法的使用,這裡先看一下典型最常用的屬性和方法:

XML DOM典型屬性

XML DOM常見方法

一些典型的 DOM屬性:

x.nodeName - x的名稱

x.nodeValue - x的值

x.parentNode - x的父節點

x.childNodes - x的子節點

x.attributes - x的屬性節點

x.getElementsByTagName(name) -擷取帶有指定标簽名稱的所有元素

x.appendChild(node) -向 x插入子節點

x.removeChild(node) -從 x删除子節點

        1,首先看一下節點的通路:可以通過三種方法(和HTML差別很大):

通過使用 getElementsByTagName()方法

通過循環(周遊)節點樹

通過利用節點的關系在節點樹中導航

         由于XML的内容量要比HTML檔案的量小的多,可以通過b,c兩種方法,HTML也可以,但是效率是非常差的(一般不用)。下邊看一個循環節點樹的執行個體:

    <head>  

                 <script type="text/javascript" src="/example/xdom/loadxmldoc.js"></script>  

    </head>  

            xmlDoc=loadXMLDoc("/example/xdom/books.xml");  

            x=xmlDoc.documentElement.childNodes;//獲得第一個book元素的子節點  

            for (i=0;i<x.length;i++)//循環  

            {   

            if (x[i].nodeType==1)//檢查其節點類型是否為元素節點(節點類型和HTML DOM中一樣)  

              {//Process only element nodes (type 1)   

              document.write(x[i].nodeName);//輸出元素節點  

              document.write("<br />");  

              }   

            }  

         2,改變節點的的屬性值可以通過nodeValue,setAttribute(),和HTML基本一樣,比較簡單。對于節點的删除,替換,建立,添加等,都是相似了,隻要我們使用對應的方法或者屬性即可完成,這裡僅僅看了一個改變節點屬性的例子:

        <script type="text/javascript" src="/example/xdom/loadxmldoc.js">   

            x=xmlDoc.getElementsByTagName("book")[0]  

            y=x.getAttributeNode("category");  

            y.nodeValue="child";  

            document.write(y.nodeValue);  

        </body>  

         3,這裡我單獨出來談一下節點的克隆,也就是複制節點,也就是将原有的節點進行複制,看下邊這個例子:

            x=xmlDoc.getElementsByTagName('book')[0];//得到為book的第一個節點  

            cloneNode=x.cloneNode(true);//克隆此節點  

            xmlDoc.documentElement.appendChild(cloneNode);//将克隆好的節點添加到xml檔案中  

            //Output all titles  

            y=xmlDoc.getElementsByTagName("title");  

            for (i=0;i<y.length;i++)  

            {  

                document.write(y[i].childNodes[0].nodeValue);//循環顯示title的節點  

                document.write("<br />");  

    三,在視訊中看到這樣一個功能,感覺是對XML操作前非常必要的,也就是對于XML中的空行和換行的處理

         Firefox,以及其他一些浏覽器,會把空的空白或換行作為文本節點來處理,而Internet Explorer 不會這樣。這就需要我們在操作XML時,先将其空文本去掉:

DOM(二)——XML DOM

         綜上為XML DOM的簡單理論學習,這裡需要我們結合執行個體,來學習,多了解各種方法屬性,結合HTML DOM一起學習。比較其中的同與異。當然這些都需要在用中不斷發現,不斷積累。

            DOM是學習AJAX的非常重要的一部分,起到了異步更新網頁的的主要操作功能。當然AJAX中的核心還得學習XMLHttpRequest對象,下篇将來學習XMLHttpRequest的具體使用法。這段時間AJAX的學習,對B/S的很多塊内容都起到了補充的作用。本來嗎,AJAX就是多種知識結合的一個新知識。繼續深入學習中……

轉載至:http://blog.csdn.net/liujiahan629629/article/details/17122059

繼續閱讀