XML DOM – 節(jié)點(diǎn)列表和命名節(jié)點(diǎn)圖

2018-02-11 15:48 更新

XML DOM 節(jié)點(diǎn)列表

DOM 節(jié)點(diǎn)列表如何返回?請參考本文獲得更加詳細(xì)的信息。

節(jié)點(diǎn)列表由 getElementsByTagName() 方法和 childNodes 屬性返回。


實(shí)例

嘗試一下 - 實(shí)例

下面的實(shí)例使用 XML 文件 books.xml
函數(shù) loadXMLDoc(),位于外部 JavaScript 中,用于加載 XML 文件。

從第一個(gè) <title> 元素獲取文本
本例使用 getElementsByTagName() 方法從 "books.xml" 中的第一個(gè) <title> 元素獲取文本。

使用 length 屬性遍歷節(jié)點(diǎn)
本例使用節(jié)點(diǎn)列表和 length 屬性來遍歷 "books.xml" 中所有的 <title> 元素。

獲取元素的屬性
本例使用屬性列表從 "books.xml" 中的第一個(gè) <book> 元素獲取屬性。


DOM 節(jié)點(diǎn)列表(Node List)

當(dāng)使用諸如 childNodes 或 getElementsByTagName() 的屬性或方法是,會返回節(jié)點(diǎn)列表對象。

節(jié)點(diǎn)列表對象表示節(jié)點(diǎn)的列表,與 XML 中的順序相同。

節(jié)點(diǎn)列表中的節(jié)點(diǎn)使用從 0 開始的索引號進(jìn)行訪問。

下面的圖像表示 "books.xml" 中 <title> 元素的節(jié)點(diǎn)列表:

DOM node list

下面的代碼片段通過使用 loadXMLDoc() 把 "books.xml" 載入 xmlDoc 中,并返回 "books.xml" 中 title 元素的節(jié)點(diǎn)列表:

xmlDoc=loadXMLDoc("books.xml");

x=xmlDoc.getElementsByTagName("title");

在上面的語句執(zhí)行之后,x 是節(jié)點(diǎn)列表對象。

下面的代碼片段從節(jié)點(diǎn)列表(x)中的第一個(gè) <title> 元素返回文本:

實(shí)例

txt=x[0].childNodes[0].nodeValue;

嘗試一下 ?

在上面的語句執(zhí)行之后,txt = "Everyday Italian"。


節(jié)點(diǎn)列表長度(Node List Length)

節(jié)點(diǎn)列表對象會保持自身的更新。如果刪除或添加了元素,列表會自動更新。

節(jié)點(diǎn)列表的 length 屬性是列表中節(jié)點(diǎn)的數(shù)量。

下面的代碼片段通過使用 loadXMLDoc() 把 "books.xml" 載入 xmlDoc 中,并返回 "books.xml" 中 <title> 元素的數(shù)量:

xmlDoc=loadXMLDoc("books.xml");

x=xmlDoc.getElementsByTagName('title').length;

在上面的語句執(zhí)行之后,x = 4。

節(jié)點(diǎn)列表的長度可用于遍歷列表中所有的元素。

下面的代碼片段使用 length 屬性來遍歷 <title> 元素的列表:

實(shí)例

xmlDoc=loadXMLDoc("books.xml");

//the x variable will hold a node list
x=xmlDoc.getElementsByTagName('title');

for (i=0;i<x.length;i++)
{
document.write(x[i].childNodes[0].nodeValue);
document.write("
");
}

輸出:

Everyday Italian
Harry Potter
XQuery Kick Start
Learning XML

嘗試一下 ?

實(shí)例解釋:

  1. 使用 loadXMLDoc() 把 "books.xml" 載入 xmlDoc 中
  2. 設(shè)置 x 變量來保存所有 title 元素的節(jié)點(diǎn)列表
  3. 從所有 <title> 元素的文本節(jié)點(diǎn)輸出值

DOM 屬性列表(命名節(jié)點(diǎn)圖 Named Node Map)

元素節(jié)點(diǎn)的 attributes 屬性返回屬性節(jié)點(diǎn)的列表。

這被稱為命名節(jié)點(diǎn)圖(Named Node Map),除了方法和屬性上的一些差別以外,它與節(jié)點(diǎn)列表相似。

屬性列表會保持自身的更新。如果刪除或添加屬性,這個(gè)列表會自動更新。

下面的代碼片段通過使用 loadXMLDoc() 把 "books.xml" 載入 xmlDoc 中,并返回 "books.xml" 中第一個(gè) <book> 元素的屬性節(jié)點(diǎn)列表:

xmlDoc=loadXMLDoc("books.xml");

x=xmlDoc.getElementsByTagName('book')[0].attributes; 

在上面的代碼執(zhí)行之后,x.length 等于屬性的數(shù)量,可使用 x.getNamedItem() 返回屬性節(jié)點(diǎn)。

下面的代碼片段顯示一個(gè) book 的 "category" 屬性的值,以及其屬性的數(shù)量:

實(shí)例

xmlDoc=loadXMLDoc("books.xml");

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

document.write(x.getNamedItem("category").nodeValue);
document.write("
" + x.length);

輸出:

cooking
1

嘗試一下 ?

實(shí)例解釋:

  1. 使用 loadXMLDoc() 把 "books.xml" 載入 xmlDoc 中
  2. 設(shè)置 x 變量來保存第一個(gè) <book> 元素的所有屬性的一個(gè)列表
  3. 從 "category" 屬性輸出值
  4. 輸出屬性列表的長度
以上就是與 DOM 列表相關(guān)的知識,接下來,你將了解如何遍歷節(jié)點(diǎn)樹。
以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號