XML DOM 節點列表 · W3School Xml 教程

# XML DOM 節點列表節點列表由 getElementsByTagName() 方法和 childNodes 屬性返回。 ## 嘗試一下 - 實例下面的實例使用 XML 文件 [books.xml](images/books.xml)。函數 [loadXMLDoc()](dom_loadxmldoc.html)，位于外部 JavaScript 中，用于加載 XML 文件。 ``` <!DOCTYPE html> <html> <head> <script src="loadxmldoc.js"> </script> </head> <body> <script> xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName("title"); txt=x[0].childNodes[0].nodeValue; document.write(txt); </script> </body> </html> ``` [從第一個 <title> 元素獲取文本](/try/try.php?filename=try_dom_nodelist) 本例使用 getElementsByTagName() 方法從 "books.xml" 中的第一個 <title> 元素獲取文本。 ``` <!DOCTYPE html> <html> <head> <script src="loadxmldoc.js"> </script> </head> <body> <script> xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName('title'); for (i=0;i<x.length;i++) { document.write(x[i].childNodes[0].nodeValue); document.write("<br>"); } </script> </body> </html> ``` [使用 length 屬性遍歷節點](/try/try.php?filename=try_dom_nodelist_length) 本例使用節點列表和 length 屬性來遍歷 "books.xml" 中所有的 <title> 元素。 [獲取元素的屬性](/try/try.php?filename=try_dom_attributes) 本例使用屬性列表從 "books.xml" 中的第一個 <book> 元素獲取屬性。 ``` <!DOCTYPE html> <html> <head> <script src="loadxmldoc.js"> </script> </head> <body> <script> xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName("book")[0].attributes; document.write(x.getNamedItem("category").nodeValue); document.write("<br>" + x.length); </script> </body> </html> ``` ## DOM 節點列表（Node List）當使用諸如 childNodes 或 getElementsByTagName() 的屬性或方法是，會返回節點列表對象。節點列表對象表示節點的列表，與 XML 中的順序相同。節點列表中的節點使用從 0 開始的索引號進行訪問。下面的圖像表示 "[books.xml](images/books.xml)" 中 <title> 元素的節點列表： ![DOM node list](/wp-content/uploads/2013/09/nodelist.gif) 下面的代碼片段通過使用 [loadXMLDoc()](dom-loadxmldoc.html) 把 "[books.xml](images/books.xml)" 載入 xmlDoc 中，并返回 "books.xml" 中 title 元素的節點列表： ``` xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName("title"); ``` 在上面的語句執行之后，x 是節點列表對象。下面的代碼片段從節點列表（x）中的第一個 <title> 元素返回文本： ## 實例 ``` txt=x[0].childNodes[0].nodeValue; ``` 在上面的語句執行之后，txt = "Everyday Italian"。 ## 節點列表長度（Node List Length）節點列表對象會保持自身的更新。如果刪除或添加了元素，列表會自動更新。節點列表的 length 屬性是列表中節點的數量。下面的代碼片段通過使用 [loadXMLDoc()](dom-loadxmldoc.html) 把 "[books.xml](images/books.xml)" 載入 xmlDoc 中，并返回 "books.xml" 中 <title> 元素的數量： ``` xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName('title').length; ``` 在上面的語句執行之后，x = 4。節點列表的長度可用于遍歷列表中所有的元素。下面的代碼片段使用 length 屬性來遍歷 <title> 元素的列表： ## 實例 ``` 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 ``` 實例解釋： 1. 使用 [loadXMLDoc()](dom-loadxmldoc.html) 把 "[books.xml](images/books.xml)" 載入 xmlDoc 中 2. 設置 x 變量來保存所有 title 元素的節點列表 3. 從所有 <title> 元素的文本節點輸出值 ## DOM 屬性列表（命名節點圖 Named Node Map）元素節點的 attributes 屬性返回屬性節點的列表。這被稱為命名節點圖（Named Node Map），除了方法和屬性上的一些差別以外，它與節點列表相似。屬性列表會保持自身的更新。如果刪除或添加屬性，這個列表會自動更新。下面的代碼片段通過使用 [loadXMLDoc()](dom-loadxmldoc.html) 把 "[books.xml](images/books.xml)" 載入 xmlDoc 中，并返回 "books.xml" 中第一個 <book> 元素的屬性節點列表： ``` xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName('book')[0].attributes; ``` 在上面的代碼執行之后，x.length 等于屬性的數量，可使用 x.getNamedItem() 返回屬性節點。下面的代碼片段顯示一個 book 的 "category" 屬性的值，以及其屬性的數量： ## 實例 ``` xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName("book")[0].attributes; document.write(x.getNamedItem("category").nodeValue); document.write(" " + x.length); ``` 輸出： ``` cooking 1 ``` 實例解釋： 1. 使用 [loadXMLDoc()](dom-loadxmldoc.html) 把 "[books.xml](images/books.xml)" 載入 xmlDoc 中 2. 設置 x 變量來保存第一個 <book> 元素的所有屬性的一個列表 3. 從 "category" 屬性輸出值 4. 輸出屬性列表的長度