JavaScript操做XML

JavaScript操做XML (一)

JavaScript操做XML是經過XML DOM來完成的。
那麼什麼是XML DOM呢？
XML DOM 是：

• 用於 XML 的標準對象模型
• 用於 XML 的標準編程接口
• 中立於平臺和語言
• W3C 的標準

XML DOM 定義了全部XML 元素的對象和屬性，以及訪問它們的方法（接口）。
也就是說：
XML DOM 是用於查詢、添加、修改、刪除XML 元素的標準。

在繼續以前，咱們先來了解一下XML的定義。
請看下面的 XML 文件 (books.xml)：
<?xml version="1.0" encoding="utf-8"?>
<bookstore>
<book category="COOKING">
  <title lang="en">Everyday Italian</title>
  <author>Giada De Laurentiis</author>
  <year>2005</year>
  <price>30.00</price>
</book>
<book category="CHILDREN">
  <title lang="en">Harry Potter</title>
  <author>J K. Rowling</author>
  <year>2005</year>
  <price>29.99</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>
<book category="WEB">
  <title lang="en">Learning XML</title>
  <author>Erik T. Ray</author>
  <year>2003</year>
  <price>39.95</price>
</book>
</bookstore>
在上面的 XML 中，根節點是 <bookstore>。文檔中的全部其餘節點都被包含在 <bookstore> 中。
根節點 <bookstore> 有四個 <book> 節點。
第一個 <book> 節點有四個節點：<title>, <author>, <year> 以及 <price>，其中每一個節點都包含一個文本節點，"Everyday Italian", "Giada De Laurentiis", "2005" 以及 "30.00"。

XML 文檔中的每一個成分都是一個節點。

節點根據 DOM，XML 文檔中的每一個成分都是一個節點。
DOM 是這樣規定的：

• 整個文檔是一個文檔節點
• 每一個 XML 標籤是一個元素節點
• 包含在 XML 元素中的文本是文本節點
• 每個 XML 屬性是一個屬性節點
• 註釋屬於註釋節點

文本老是存儲在文本節點中在 DOM 處理中一個廣泛的錯誤是，認爲元素節點包含文本。
不過，元素節點的文本是存儲在文本節點中的。
在這個例子中：<year>2005</year>，元素節點 <year>，擁有一個值爲 "2005" 的文本節點。
2005" 不是 <year> 元素的值！

XML DOM 把 XML DOM 文檔視爲一棵節點樹 (node-tree)。
樹中的全部節點彼此之間都有關係。
XML DOM 節點樹XML DOM 把 XML 文檔視爲一種樹結構。這種樹結構被稱爲節點樹。
可經過這棵樹訪問全部節點。能夠修改或刪除它們的內容，也能夠建立新的元素。
這顆節點樹展現了節點的集合，以及它們之間的聯繫。這棵樹從根節點開始，而後在樹的最低層級向文本節點長出枝條：

父、子和兄弟節點節點樹中的節點彼此之間都有等級關係。
父、子和兄弟節點用於描述這種關係。父節點擁有子節點，位於相同層級上的子節點稱爲兄弟節點。

• 在節點樹中，頂端的節點成爲根節點
• 根節點以外的每一個節點都有一個父節點
• 節點能夠有任何數量的子節點
• 葉子是沒有子節點的節點
• 兄弟節點是擁有相同父節點的節點

在上面的 XML 中，<title> 元素是 <book> 元素的第一個子節點，而 <price> 元素是 <book> 元素的最後一個子節點。
此外，<book> 元素是 <title>、<author>、<year> 以及 <price> 元素的父節點。
Note: 父節點：Parent Node，子節點：Children Node，同級節點：Sibling Node

 

JavaScript操做XML(二)

這一篇介紹瀏覽器內建的XML解析器以及JavaScript是如何加載XML的。


大多數瀏覽器都有讀取和操做 XML 的內建 XML 解析器。
解析器(XML Parser)把 XML 轉換爲 JavaScript 可訪問的對象。
解析器把 XML 載入內存，而後把它轉換爲可經過 JavaScript 訪問的 XML DOM 對象。
微軟的 XML 解析器與其餘瀏覽器中的解析器之間，存在一些差別。微軟的解析器支持 XML 文件和 XML 字符串（文本）的加載，而其餘瀏覽器使用單獨的解析器。不過，全部的解析器都包含遍歷 XML 樹、訪問插入及刪除節點（元素）及其屬性的函數。
Note：當咱們談及 XML 解析，咱們經常會使用有關 XML 元素的術語：節點。
1、IE經過微軟的 XML 解析器來加載 XML
微軟的 XML 解析器內建於 Internet Explorer 5 以及更高的版本中。
下面的 JavaScript 片斷把一個 XML 文檔載入解析器中：
var xmlDoc=new ActiveXObject("Microsoft.XMLDOM");xmlDoc.async="false";xmlDoc.load("note.xml");例子解釋：

1.  上面代碼的第一個行建立一個空的微軟 XML 文檔對象。

2.  第二行關閉異步加載，這樣確保在文檔徹底加載以前解析器不會繼續腳本的執行。

3.  第三行告知解析器加載名爲 "note.xml" 的 XML 文檔。

下面的 JavaScript 片斷把字符串 txt 載入解析器：
var xmlDoc=new ActiveXObject("Microsoft.XMLDOM");xmlDoc.async="false";xmlDoc.loadXML(txt);註釋：loadXML() 方法用於加載字符串（文本），load() 用於加載文件。

2、Firefox 及其餘瀏覽器中的 XML 解析器下面的 JavaScript 片斷把 XML 文檔 ("note.xml") 載入解析器：
var xmlDoc=document.implementation.createDocument("","",null);xmlDoc.async="false";xmlDoc.load("note.xml");例子解釋：

1.  上面代碼的第一個行建立一個空的 XML 文檔對象。

2.  第二行關閉異步加載，這樣確保在文檔徹底加載以前解析器不會繼續腳本的執行。

3.  第三行告知解析器加載名爲 "note.xml" 的 XML 文檔。

下面的 JavaScript 片斷把字符串 txt 載入解析器：
var parser=new DOMParser();var xmlDoc=parser.parseFromString(txt,"text/xml");例子解釋：

1.  上面代碼的第一個行建立一個空的微軟 XML 文檔對象。

2.  第二行告知解析器載入名爲 txt 的字符串。

註釋：DOMParser對象的parseFromString () 方法用於加載字符串（文本），load() 用於加載文件。

3、跨域訪問出於安全方面的緣由，現代的瀏覽器不容許跨域的訪問。
假如你打算在本身的網頁上使用上面的例子，則必須把 XML 文件放到本身的服務器上。不然，xmlDoc.load() 將產生錯誤 "Access is denied"。

 

JavaScript操做XML(三)

上一篇介紹了XML如何加載到JavaScript解析器。
這一篇介紹加載到解析器後，JavaScript是如何訪問節點的。

在詳細介紹如何使用上面的方法前，咱們先來了解下節點的主要屬性。
documentElement 屬性：XML 文檔的根節點。
nodeName 屬性：節點的名稱(只讀)。
nodeValue 屬性：節點的值。
nodeType 屬性：節點的類型。
childNodes 屬性：返回子節點集合。
parentNode 屬性：返回父節點。
firstChild 屬性：返回第一個子節點。
lastChild 屬性：返回最後一個子節點。
nextSibling 屬性：返回下一個兄弟（同級）節點。
previousSibling 屬性：返回前一個兄弟（同級）節點。

nodeName 屬性nodeName 屬性規定節點的名稱。

• nodeName 是隻讀的
• 元素節點的 nodeName 與標籤名相同
• 屬性節點的 nodeName 是屬性的名稱
• 文本節點的 nodeName 永遠是 #text
• 文檔節點的 nodeName 永遠是 #document

nodeValue 屬性nodeValue 屬性規定節點的值。

• 元素節點的 nodeValue 是 undefined
• 文本節點的 nodeValue 是文本自身
• 屬性節點的 nodeValue 是屬性的值

nodeType 屬性nodeType 屬性規定節點的類型。
nodeType 是隻讀的。
最重要的節點類型是：

元素類型	節點類型
元素	1
屬性	2
文本	3
註釋	8
文檔	9

您能夠經過四種方法來訪問節點：
1、經過getElementsById() 方法。
     用法： var xNode = xmlDoc.getElementsById('ID') ;
     解釋：這個方法我想你們已經很熟悉了。就是若是XML裏有個id='ID'的Node，那個就返回這個Node節點，不然返回null。
     在獲得這個Node後，就能夠用上面的屬性進行訪問了。
     ps: xmlDoc的定義能夠在上一篇文章中找到。


2、經過getElementsByTagName() 方法。
      用法：var arrNodes=xmlDoc.getElementsByTagName('TagName') ;
     解釋：這個方法是根據tagname返回一個數組。此方法最經常使用。
     例子1：
     //xml 內容： JavaScript操做XML (一)
      var arrNodes=xmlDoc.getElementsByTagName("title");
   for (i=0;i<arrNodes.length;i++)
     {
      alert(arrNodes.childNodes[0].nodeValue);
   }
例子2：
     // 獲取第一個 <title> 元素節點的文本節點。注意，元素內的文本是元素的子節點，叫文本節點。
     var xNode=xmlDoc.getElementsByTagName("title")[0].childNodes[0];
     alert(xNode.nodeValue); // 文本節點的值 。output "Everyday Italian"

3、經過循環（遍歷）節點樹。
     這個方法沒什麼好說的，就是用for循環結合childNodes遍歷因此的節點。
例子：
x=xmlDoc.documentElement.childNodes;
for (i=0;i<x.length;i++)//只遍歷了一層
{
document.write(x.nodeName);
document.write("<br />");
}

4、經過節點的關係在節點樹中導航。
     這個方法是根據當前節點獲得parentNode 、firstChild、lastChild、nextSibling 、previousSibling 來移動。
x=xmlDoc.getElementsByTagName("book")[0].childNodes;
y=xmlDoc.getElementsByTagName("book")[0].firstChild;
for (i=0;i<x.length;i++)
{
document.write(y.nodeName + "<br />");
    y=y.nextSibling;
}

 

 

JavaScript操做XML (四)

上一篇介紹了JavaScript主要是經過什麼方法來訪問節點的。
這一篇介紹JavaScript是如何操做節點的(包括增、刪、改、查)。

經過前面的介紹，咱們知道XML文檔中，主要是元素節點、屬性節點和文本節點。
下面詳細介紹JavaScript是如何操做它們的。
元素節點：
查找：上一篇已介紹。主要是經過方法getElementsByTagName來查找定位。
例子：
//輸出全部的titles
var t=xmlDoc.getElementsByTagName("title");
for (i=0;i<t.length;i++)
{
document.write(t.childNodes[0].nodeValue);
document.write("<br />");
}

添加：主要是用createElement建立元素，而後用appendChild附加子節點的形式實現。
例子：
var newNode=xmlDoc.createElement("New Element Name");//建立元素節點
var nodeBook =xmlDoc.getElementsByTagName("book")[0];//找到節點book
nodeBook.appendChild(newNode);//把newNode做爲子節點追加到父節點book的子節點後面。也就是說，要追加節點，必須先找到父節點。
另外，還能夠經過克隆的方式添加節點。
cloneNode() 方法有一個參數（true 或 false）。該參數指示被複制的節點是否包括原節點的全部屬性和子節點。
例子：
oldNode=xmlDoc.getElementsByTagName('book')[0];
newNode=oldNode.cloneNode(true);// 克隆複製原節點以及全部屬性和子節點
xmlDoc.documentElement.appendChild(newNode);

刪除：父節點調用removeChild實現。
例如：
var nodeBook=xmlDoc.getElementsByTagName("book")[0];//找到節點book
xmlDoc.documentElement.removeChild(nodeBook);//刪除根節點下面的第一個book節點
注意：刪除某個節點，它下面的子節點也會被同時刪除。

修改：不容許直接修改元素。若真要修改能夠用replaceChild間接完成。
語法是: parentNode. replaceChild(newNode,oldNode)

另外，元素沒有nodeValue。若要修改元素內的文本，如修改<title>hello</title>裏的hello，可參考下面的操做文本節點。

文本節點：
查找：查找文本節點不能直接用getElementsByTagName,而是先用它找到元素節點，而後再用childNodes[0]或firstChild來定位文本節點（由於它是以元素節點的第一個子節點的形式存在的），接着再用nodeValue便可獲得文本內容。
例子：
var nodeTitle=xmlDoc.getElementsByTagName("title")[0];
var titleTextNode=nodeTitle.childNodes[0];//也能夠用firstChild
var theTxt=titleTextNode.nodeValue;

添加：相似於元素的添加方式，但文本的添加是經過createTextNode建立的(note:在XHTML也能夠用innerHTML的方式添加)。
例子：
var edition=xmlDoc.createElement("edition");
var newtext=xmlDoc.createTextNode("this is first");
edition.appendChild(newtext);//在操做XHTML時, 上面這兩行可直接用edition.innerHTML=’ this is first’代替;
var nodeBook=xmlDoc.getElementsByTagName("book")[0];
nodeBook.appendChild(edition);

刪除：父節點調用removeChild實現。固然也能夠用清空nodeValue的方式實現。如textNode.nodeValue=’’。

修改：textNode.nodeValue=’修改爲你想要的文本內容’。
另外，文本節點的修改也能夠用replaceData()替換文本節點中的數據。
replaceData() 方法有三個參數：
offset - 在何處開始替換字符。Offset 值以 0 開始。
length - 要替換多少字符。，
string - 要插入的字符串。
例子：
xmlDoc.getElementsByTagName("title")[0].childNodes[0].replaceData(0,8,"hello");
//note:其實徹底能夠用substr或者substring事先處理字符串，再賦值給nodeValue

屬性節點：
查找：與元素節點不一樣，屬性節點擁有文本值。獲取屬性的值的方法，就是獲取它的文本值。能夠經過使用 getAttribute() 方法或屬性節點的 nodeValue 屬性來完成這個任務。
例子：
xmlDoc.getElementsByTagName("title")[0].getAttribute("lang");//return 「en」
或者
xmlDoc.getElementsByTagName("title")[0].getAttributeNode("lang"). nodeValue; //return 「en」

添加：用setAttribute或者setAttributeNode實現。
例子：
xmlDoc.getElementsByTagName('book')[0].setAttribute("edition","this is first");
或者
var newAtt=xmlDoc.createAttribute("edition");
newAtt.nodeValue="this is first first";
xmlDoc.getElementsByTagName("title")[0].setAttributeNode(newAtt);

刪除：可用removeAttribute(name)或者removeAttributeNode(node)
例子：
//方式1：removeAttribute
//刪除第一個 <book> 元素中的 "category" 屬性：
xmlDoc.getElementsByTagName("book")[0].removeAttribute("category");

//方式2：removeAttributeNode
//刪除全部 <book> 元素的全部屬性
x=xmlDoc.getElementsByTagName("book");
for (i=0;i<x.length;i++)
{
while (x.attributes.length>0)
{
attnode=x.attributes[0];
old_att=x.removeAttributeNode(attnode);
}
}


修改：經過使用 setAttribute() 方法或屬性節點的 nodeValue 屬性來完成。
例子：// setAttributexmlDoc.getElementsByTagName('book')[0].setAttribute("category","child"); //set nodeValuevar x=xmlDoc.getElementsByTagName("book")[0]var y=x.getAttributeNode("category");y.nodeValue="child";