DOM(二)——XML DOM
XML(Extensible Markup Language)可擴展標記語言(可以通過這篇博客簡單了解XML基礎介紹),DOM(Document ObjectModel)文檔對象模型(通過上篇博客了解DOM(一)——HTML DOM)。非常明顯,XML DOM就是文檔類型模型針對XML做的一些操作。是和HTMLDOM共同合作來完成網頁數據的動態改變顯示等問題!和XML DOM有很多相似的地方,但是基于XML和HTML的區別,他們的一些操作還是有很大不同的。來看一下JavaScript通過DOM對XML的操作相關知識。
??????? DOM在XML中關于節點,屬性,方法等的概念,知識都是非常相似的,這里不再贅述,這里重點通過幾個實例運用一下!
??????我們先引進一個XML文件books.xml,以后操作都在它上進行:(注意觀察XML和HTML的不同處和相同處)
[html]?view plain?copy?print?
<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>???
??<year>2005</year>???
??<price>30.00</price>???
</book>??
<book?category="web">??
??<title?lang="en">Learning?XML</title>???
??<author>Erik?T.?Ray</author>???
??<year>2003</year>???
??<price>39.95</price>???
</book>??
<book?category="web">??
??<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>???
??<year>2003</year>???
??<price>49.99</price>???
</book>??
</bookstore>??
</span>??
? ? 一,解析XML文件,大多數瀏覽器都內建了讀取和操作XML的解析器,通過解析器把XML轉換為JavaScript可存取的對象。但是這里的以IE為內核的和FireFox或其他的瀏覽器是不同的,這里看個全面的加載解析XML文件的例子:(以上邊books.xml進行實驗)
[javascript]?view plain?copy?print?
<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>??
</span>??
? ? 二,主要是對節點的各種操作了,主要就是一些屬性和方法的使用,這里先看一下典型最常用的屬性和方法:
?
| XML DOM典型屬性 | XML DOM常見方法 |
| 一些典型的?DOM屬性:
|
|
?
? ?更多的詳細請看,非常詳細:xmldom屬性與方法詳解。
? ? ? ? 1,首先看一下節點的訪問:可以通過三種方法(和HTML區別很大):
通過使用?getElementsByTagName()方法
通過循環(遍歷)節點樹
通過利用節點的關系在節點樹中導航
? ? ? ? ?由于XML的內容量要比HTML文件的量小的多,可以通過b,c兩種方法,HTML也可以,但是效率是非常差的(一般不用)。下邊看一個循環節點樹的實例:
[javascript]?view plain?copy?print?
<span?style="font-size:18px;"><html>??
????<head>??
?????????????????<script?type="text/javascript"?src="/example/xdom/loadxmldoc.js"></script>??
????</head>??
????<body>??
??????
????????<script?type="text/javascript">??
????????????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?/>");??
??????????????}???
????????????}??
????????</script>??
????</body>??
</html>??
</span>??
? ? ? ? ?2,改變節點的的屬性值可以通過nodeValue,setAttribute(),和HTML基本一樣,比較簡單。對于節點的刪除,替換,創建,添加等,都是相似了,只要我們使用對應的方法或者屬性即可完成,這里僅僅看了一個改變節點屬性的例子:
[javascript]?view plain?copy?print?
<span?style="font-size:18px;"><html>??
????<head>??
????????<script?type="text/javascript"?src="/example/xdom/loadxmldoc.js">???
????????</script>??
????</head>??
????<body>??
??????
????????<script?type="text/javascript">??
????????????xmlDoc=loadXMLDoc("/example/xdom/books.xml");??
??????????????
????????????x=xmlDoc.getElementsByTagName("book")[0]??
????????????y=x.getAttributeNode("category");??
????????????y.nodeValue="child";??
??????????????
????????????document.write(y.nodeValue);??
????????</script>??
????????</body>??
</html>??
</span>??
? ? ? ? ?3,這里我單獨出來談一下節點的克隆,也就是復制節點,也就是將原有的節點進行復制,看下邊這個例子:
[javascript]?view plain?copy?print?
<span?style="font-size:18px;"><html>??
????<head>??
????????<script?type="text/javascript"?src="/example/xdom/loadxmldoc.js">???
????????</script>??
????</head>??
????<body>??
??????
????????<script?type="text/javascript">??
????????????xmlDoc=loadXMLDoc("/example/xdom/books.xml");??
????????????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?/>");??
????????????}??
????????</script>??
????</body>??
</html>??
</span>??
? ? 三,在視頻中看到這樣一個功能,感覺是對XML操作前非常必要的,也就是對于XML中的空行和換行的處理
:
? ? ? ? ?Firefox,以及其他一些瀏覽器,會把空的空白或換行作為文本節點來處理,而Internet Explorer 不會這樣。這就需要我們在操作XML時,先將其空文本去掉:
? ? ? ? ?綜上為XML DOM的簡單理論學習,這里需要我們結合實例,來學習,多了解各種方法屬性,結合HTML DOM一起學習。比較其中的同與異。當然這些都需要在用中不斷發現,不斷積累。
??????????? DOM是學習AJAX的非常重要的一部分,起到了異步更新網頁的的主要操作功能。當然AJAX中的核心還得學習XMLHttpRequest對象,下篇將來學習XMLHttpRequest的具體使用法。這段時間AJAX的學習,對B/S的很多塊內容都起到了補充的作用。本來嗎,AJAX就是多種知識結合的一個新知識。繼續深入學習中……
轉載至:http://blog.csdn.net/liujiahan629629/article/details/17122059
總結
以上是生活随笔為你收集整理的DOM(二)——XML DOM的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 300块左右的智能手机
- 下一篇: 如何对已经发布过的InfoPath模板进