XML DOM - 訪問節點 · W3School Xml 教程

# XML DOM - 訪問節點通過 DOM，您能夠訪問 XML 文檔中的每個節點。 ## 嘗試一下 - 實例下面的實例使用 XML 文件 [books.xml](images/books.xml)。函數 [loadXMLDoc()](dom-loadxmldoc.html)，位于外部 JavaScript 中，用于加載 XML 文件。 [使用節點列表中的索引號來訪問節點](/try/try.php?filename=try_dom_index) 本例使用 getElementsByTagname() 方法來獲取 "books.xml" 中的第三個 <title> 元素。 ``` <!DOCTYPE html> <html> <head> <script src="loadxmldoc.js"></script> </head> <body> <script> xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName("title"); document.write(x[2].childNodes[0].nodeValue); </script> </body> </html> ``` [使用 length 屬性來遍歷節點](/try/try.php?filename=try_dom_list_loop) 本例使用 length 屬性來遍歷 "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> ``` [查看元素的節點類型](/try/try.php?filename=try_dom_root) 本例使用 nodeType 屬性來獲取 "books.xml" 中根元素的節點類型。 ``` <!DOCTYPE html> <html> <head> <script src="loadxmldoc.js"></script> </head> <body> <script> xmlDoc=loadXMLDoc("books.xml"); document.write(xmlDoc.documentElement.nodeName); document.write("<br>"); document.write(xmlDoc.documentElement.nodeType); </script> </body> </html> ``` [遍歷元素節點](/try/try.php?filename=try_dom_loop) 本例使用 nodeType 屬性來處理 "books.xml" 中的元素節點。 ``` <!DOCTYPE html> <html> <head> <script src="loadxmldoc.js"></script> </head> <body> <script> xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.documentElement.childNodes; for (i=0;i<x.length;i++) { if (x[i].nodeType==1) {//Process only element nodes (type 1) document.write(x[i].nodeName); document.write("<br>"); } } </script> </body> </html> ``` [使用節點的關系來遍歷元素節點](/try/try.php?filename=try_dom_navigate) 本例使用 nodeType 屬性和 nextSibling 屬性來處理 "books.xml" 中的元素節點。 ``` <!DOCTYPE html> <html> <head> <script src="loadxmldoc.js"></script> </head> <body> <script> xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName("book")[0].childNodes; y=xmlDoc.getElementsByTagName("book")[0].firstChild; for (i=0;i<x.length;i++) { if (y.nodeType==1) {//Process only element nodes (type 1) document.write(y.nodeName + "<br>"); } y=y.nextSibling; } </script> </body> </html> ``` ## 訪問節點您可以通過三種方式來訪問節點： 1\. 通過使用 getElementsByTagName() 方法。 2\. 通過循環（遍歷）節點樹。 3\. 通過利用節點的關系在節點樹中導航。 ## getElementsByTagName() 方法 getElementsByTagName() 返回擁有指定標簽名的所有元素。 ### 語法 ``` _node_.getElementsByTagName(_"tagname"_); ``` ### 實例下面的實例返回 x 元素下的所有 <title> 元素： ``` x.getElementsByTagName("title"); ``` 請注意，上面的實例僅返回 x 節點下的 <title> 元素。如需返回 XML 文檔中的所有 <title> 元素，請使用： ``` xmlDoc.getElementsByTagName("title"); ``` 在這里，xmlDoc 就是文檔本身（文檔節點）。 ## DOM 節點列表（Node List） getElementsByTagName() 方法返回節點列表。節點列表是節點的數組。下面的代碼使用 [loadXMLDoc()](dom-loadxmldoc.html) 把 "[books.xml](images/books.xml)" 載入 xmlDoc 中，然后在變量 x 中存儲 <title> 節點的一個列表： ``` xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName("title"); ``` 可通過索引號訪問 x 中的 <title> 元素。如需訪問第三個 <title>，您可以編寫： ``` y=x[2]; ``` **注意：**該索引從 0 開始。在本教程后面的章節中，您將學習更多有關節點列表（Node List）的知識。 ## DOM 節點列表長度（Node List Length） length 屬性定義節點列表的長度（即節點的數量）。您可以通過使用 length 屬性來遍歷節點列表： ## 實例 ``` xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName("title"); for (i=0;i<x.length;i++) { document.write(x[i].childNodes[0].nodeValue); document.write(" "); } ``` 實例解釋： 1. 使用 [loadXMLDoc()](dom-loadxmldoc.html) 把 "[books.xml](images/books.xml)" 載入 xmlDoc 中 2. 獲取所有 <title> 元素節點 3. 輸出每個 <title> 元素的文本節點的值 ## 節點類型（Node Types） XML 文檔的 **documentElement** 屬性石根節點。節點的 **nodeName** 屬性是節點的名稱。節點的 **nodeType** 屬性是節點的類型。您將在本教程的下一章中學習更多有關節點屬性的知識。 [嘗試一下](/try/try.php?filename=try_dom_root) ## 遍歷節點下面的代碼遍歷根節點的子節點，同時也是元素節點： ## 實例 ``` xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.documentElement.childNodes; for (i=0;i<x.length;i++) { if (x[i].nodeType==1) {//Process only element nodes (type 1) document.write(x[i].nodeName); document.write(" "); } } ``` 實例解釋： 1. 使用 [loadXMLDoc()](dom-loadxmldoc.html) 把 "[books.xml](images/books.xml)" 載入 xmlDoc 中 2. 獲取根元素的子節點 3. 檢查每個子節點的節點類型。如果節點類型是 "1"，則是元素節點 4. 如果是元素節點，則輸出節點的名稱 ## 導航節點的關系下面的代碼使用節點關系導航節點樹： ## 實例 ``` xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName("book")[0].childNodes; y=xmlDoc.getElementsByTagName("book")[0].firstChild; for (i=0;i<x.length;i++) { if (y.nodeType==1) {//Process only element nodes (type 1) document.write(y.nodeName + " "); } y=y.nextSibling; } ``` 1. 使用 [loadXMLDoc()](dom-loadxmldoc.html) 把 "[books.xml](images/books.xml)" 載入 xmlDoc 中 2. 獲取第一個 book 元素的子節點 3. 把 "y" 變量設置為第一個 book 元素的第一個子節點 4. 對于每個子節點（第一個子節點從 "y" 開始），檢查節點類型，如果節點類型為 "1"，則是元素節點 5. 如果是元素節點，則輸出該節點的名稱 6. 把 "y" 變量設置為下一個同級節點，并再次運行循環