XML DOM节点列表

节点列表由 getElementsByTagName() 方法和 childNodes 属性返回。

tryitimg.gif尝试一下 - 实例


下面的实例使用 XML 文件books.xml。
函数 loadXMLDoc()，位于外部 JavaScript 中，用于加载 XML 文件。

从第一个 元素获取文本<br>本例使用 getElementsByTagName() 方法从 "books.xml" 中的第一个 <title> 元素获取文本。</p> <p>使用 length 属性遍历节点<br>本例使用节点列表和 length 属性来遍历 "books.xml" 中所有的 <title> 元素。</p> <p>获取元素的属性<br>本例使用属性列表从 "books.xml" 中的第一个 <book> 元素获取属性。</p> <hr> <h2>DOM 节点列表（Node List）</h2> <p>当使用诸如 childNodes 或 getElementsByTagName() 的属性或方法是，会返回节点列表对象。</p> <p>节点列表对象表示节点的列表，与 XML 中的顺序相同。</p> <p>节点列表中的节点使用从 0 开始的索引号进行访问。</p> <p>下面的图像表示 "books.xml" 中 <title> 元素的节点列表：</p> <img src="https://img.php.cn/upload/image/883/549/661/1476759148760971.gif" title="1476759148760971.gif" alt="nodelist.gif"> <p>下面的代码片段通过使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中，并返回 "books.xml" 中 title 元素的节点列表：</p> <div class="code notranslate"> <div> xmlDoc=loadXMLDoc("books.xml"); <br> <br>x=xmlDoc.getElementsByTagName("title"); </div> </div> <p>在上面的语句执行之后，x 是节点列表对象。</p> <p>下面的代码片段从节点列表（x）中的第一个 <title> 元素返回文本：</p> <div class="example"> <h2 class="example">实例</h2> <div class="example_code"> <pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <head> <script src="loadxmldoc.js"> </script> <script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script> </head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div> <body> <script> xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName("title"); txt=x[0].childNodes[0].nodeValue; document.write(txt); </script> </body> </html></pre> </div> <br> <a target="_blank" href="#" class="showbtn codebtn">运行实例 »</a> <p>点击 "运行实例" 按钮查看在线实例</p> </div> <p>在上面的语句执行之后，txt = "Everyday Italian"。</p> <hr> <h2>节点列表长度（Node List Length）</h2> <p>节点列表对象会保持自身的更新。如果删除或添加了元素，列表会自动更新。</p> <p>节点列表的 length 属性是列表中节点的数量。</p> <p>下面的代码片段通过使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中，并返回 "books.xml" 中 <title> 元素的数量：</p> <div class="code notranslate"> <div> xmlDoc=loadXMLDoc("books.xml"); <br> <br>x=xmlDoc.getElementsByTagName('title').length; </div> </div> <p>在上面的语句执行之后，x = 4。</p> <p>节点列表的长度可用于遍历列表中所有的元素。</p> <p>下面的代码片段使用 length 属性来遍历 <title> 元素的列表：</p> <div class="example"> <h2 class="example">实例</h2> <div class="example_code"> <pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <head> <script src="loadxmldoc.js"> </script> <script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script> </head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div> <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></pre> </div> <br> <a target="_blank" href="#" class="showbtn codebtn">运行实例 »</a> <p>点击 "运行实例" 按钮查看在线实例</p> </div> <p>输出：</p> <div class="code notranslate"> <div> Everyday Italian <br>Harry Potter <br>XQuery Kick Start <br>Learning XML </div> </div> <p>实例解释：</p> <ol class=" list-paddingleft-2"> <li><p>使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中</p></li> <li><p>设置 x 变量来保存所有 title 元素的节点列表</p></li> <li><p>从所有 <title> 元素的文本节点输出值</p></li> </ol> <hr> <h2>DOM 属性列表（命名节点图 Named Node Map）</h2> <p>元素节点的 attributes 属性返回属性节点的列表。</p> <p>这被称为命名节点图（Named Node Map），除了方法和属性上的一些差别以外，它与节点列表相似。</p> <p>属性列表会保持自身的更新。如果删除或添加属性，这个列表会自动更新。</p> <p>下面的代码片段通过使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中，并返回 "books.xml" 中第一个 <book> 元素的属性节点列表：</p> <div class="code notranslate"> <div> xmlDoc=loadXMLDoc("books.xml"); <br> <br>x=xmlDoc.getElementsByTagName('book')[0].attributes; </div> </div> <p>在上面的代码执行之后，x.length 等于属性的数量，可使用 x.getNamedItem() 返回属性节点。</p> <p>下面的代码片段显示一个 book 的 "category" 属性的值，以及其属性的数量：</p> <div class="example"> <h2 class="example">实例</h2> <div class="example_code"> <pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <head> <script src="loadxmldoc.js"> </script> <script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script> </head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div> <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></pre> </div> <br> <a target="_blank" href="#" class="showbtn codebtn">运行实例 »</a> <p>点击 "运行实例" 按钮查看在线实例</p> </div> <p><span style="line-height: 2em;"></span></p> <p>输出：</p> <div class="code notranslate"> <div> cooking <br>1 </div> </div> <p><span style="line-height: 2em;">实例解释：</span><span style="line-height: 2em;"><br></span></p> <ol class=" list-paddingleft-2"> <li><p>使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中</p></li> <li><p>设置 x 变量来保存第一个 <book> 元素的所有属性的一个列表</p></li> <li><p>从 "category" 属性输出值</p></li> <li><p>输出属性列表的长度</p></li> </ol> <br> </div> </div> </div> <div class="previous-next-links"> <div class="previous-design-link"> ← <a href="//m.sbmmt.com/zh-tw/xml/xml-nodes-info.html" rel="prev">DOM 节点信息</a> </div> <div class="next-design-link"> <a href="//m.sbmmt.com/zh-tw/xml/xml-nodes-traverse.html" rel="next">DOM 遍历</a>→ </div> </div> </article> <div class="right-item phpcn-col-md2"> <ul> <li><h3>教學導航</h3> <dl class="navigation"> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/zh-tw/course/list/1/type/3.html" target="_blank" title="大前端">大前端</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/zh-tw/course/list/1/type/3.html" title="超文本標記語言">超文本標記語言</a> <a href="//m.sbmmt.com/zh-tw/course/list/1/type/3.html" title="CSS">CSS</a> <a href="//m.sbmmt.com/zh-tw/course/list/1/type/3.html" title="HTML5">HTML5</a> <a href="//m.sbmmt.com/zh-tw/course/list/1/type/3.html" title="CSS3">CSS3</a> <a href="//m.sbmmt.com/zh-tw/course/list/1/type/3.html" title="JavaScript">JavaScript</a> <a href="//m.sbmmt.com/zh-tw/course/list/1/type/3.html" title="jQuery">jQuery</a> <a href="//m.sbmmt.com/zh-tw/course/list/1/type/3.html" title="Vue.js">Vue.js</a> <a href="//m.sbmmt.com/zh-tw/course/list/1/type/3.html" title="反應">反應</a> <a href="//m.sbmmt.com/zh-tw/course/list/1/type/3.html" title="AngularJS">AngularJS</a> <a href="//m.sbmmt.com/zh-tw/course/list/1/type/3.html" title="Node.js">Node.js</a> <a href="//m.sbmmt.com/zh-tw/course/list/1/type/3.html" title="阿賈克斯">阿賈克斯</a> <a href="//m.sbmmt.com/zh-tw/course/list/1/type/3.html" title="引導程式">引導程式</a> <a href="//m.sbmmt.com/zh-tw/course/list/1/type/3.html" title="基礎">基礎</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/zh-tw/course/list/2/type/3.html" target="_blank" title="JavaScript">JavaScript</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/zh-tw/course/list/2/type/3.html" title="高圖表">高圖表</a> <a href="//m.sbmmt.com/zh-tw/course/list/2/type/3.html" title="地圖應用程式介面">地圖應用程式介面</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/zh-tw/course/list/3/type/3.html" target="_blank" title="後端開發">後端開發</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/zh-tw/course/list/3/type/3.html" title="PHP">PHP</a> <a href="//m.sbmmt.com/zh-tw/course/list/3/type/3.html" title="ThinkPHP">ThinkPHP</a> <a href="//m.sbmmt.com/zh-tw/course/list/3/type/3.html" title="拉維爾">拉維爾</a> <a href="//m.sbmmt.com/zh-tw/course/list/3/type/3.html" title="Python">Python</a> <a href="//m.sbmmt.com/zh-tw/course/list/3/type/3.html" title="去">去</a> <a href="//m.sbmmt.com/zh-tw/course/list/3/type/3.html" title="爪哇">爪哇</a> <a href="//m.sbmmt.com/zh-tw/course/list/3/type/3.html" title="C">C</a> <a href="//m.sbmmt.com/zh-tw/course/list/3/type/3.html" title="C++">C++</a> <a href="//m.sbmmt.com/zh-tw/course/list/3/type/3.html" title="C#">C#</a> <a href="//m.sbmmt.com/zh-tw/course/list/3/type/3.html" title="聯合應用程式">聯合應用程式</a> <a href="//m.sbmmt.com/zh-tw/course/list/3/type/3.html" title="薑戈">薑戈</a> <a href="//m.sbmmt.com/zh-tw/course/list/3/type/3.html" title="ASP.NET">ASP.NET</a> <a href="//m.sbmmt.com/zh-tw/course/list/3/type/3.html" title="ASP">ASP</a> <a href="//m.sbmmt.com/zh-tw/course/list/3/type/3.html" title="XML">XML</a> <a href="//m.sbmmt.com/zh-tw/course/list/3/type/3.html" title="紅寶石">紅寶石</a> <a href="//m.sbmmt.com/zh-tw/course/list/3/type/3.html" title="Python3">Python3</a> <a href="//m.sbmmt.com/zh-tw/course/list/3/type/3.html" title="珀爾">珀爾</a> <a href="//m.sbmmt.com/zh-tw/course/list/3/type/3.html" title="服務程式">服務程式</a> <a href="//m.sbmmt.com/zh-tw/course/list/3/type/3.html" title="盧阿">盧阿</a> <a href="//m.sbmmt.com/zh-tw/course/list/3/type/3.html" title="斯卡拉">斯卡拉</a> <a href="//m.sbmmt.com/zh-tw/course/list/3/type/3.html" title="應用機器學習">應用機器學習</a> <a href="//m.sbmmt.com/zh-tw/course/list/3/type/3.html" title="VB腳本">VB腳本</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/zh-tw/course/list/4/type/3.html" target="_blank" title="資料庫">資料庫</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/zh-tw/course/list/4/type/3.html" title="MySQL">MySQL</a> <a href="//m.sbmmt.com/zh-tw/course/list/4/type/3.html" title="雷迪斯">雷迪斯</a> <a href="//m.sbmmt.com/zh-tw/course/list/4/type/3.html" title="甲骨文">甲骨文</a> <a href="//m.sbmmt.com/zh-tw/course/list/4/type/3.html" title="MongoDB">MongoDB</a> <a href="//m.sbmmt.com/zh-tw/course/list/4/type/3.html" title="記憶體快取">記憶體快取</a> <a href="//m.sbmmt.com/zh-tw/course/list/4/type/3.html" title="SQL伺服器">SQL伺服器</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/zh-tw/course/list/5/type/3.html" target="_blank" title="行動端">行動端</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/zh-tw/course/list/5/type/3.html" title="小程式">小程式</a> <a href="//m.sbmmt.com/zh-tw/course/list/5/type/3.html" title="統一應用程式">統一應用程式</a> <a href="//m.sbmmt.com/zh-tw/course/list/5/type/3.html" title="Flutter">Flutter</a> <a href="//m.sbmmt.com/zh-tw/course/list/5/type/3.html" title="安卓">安卓</a> <a href="//m.sbmmt.com/zh-tw/course/list/5/type/3.html" title="iOS">iOS</a> <a href="//m.sbmmt.com/zh-tw/course/list/5/type/3.html" title="迅速">迅速</a> <a href="//m.sbmmt.com/zh-tw/course/list/5/type/3.html" title="其它">其它</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/zh-tw/course/list/9/type/3.html" target="_blank" title="維運開發">維運開發</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/zh-tw/course/list/9/type/3.html" title="Linux">Linux</a> <a href="//m.sbmmt.com/zh-tw/course/list/9/type/3.html" title="碼頭工人">碼頭工人</a> <a href="//m.sbmmt.com/zh-tw/course/list/9/type/3.html" title="PhpStudy">PhpStudy</a> <a href="//m.sbmmt.com/zh-tw/course/list/9/type/3.html" title="Git">Git</a> <a href="//m.sbmmt.com/zh-tw/course/list/9/type/3.html" title="其它工具">其它工具</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/zh-tw/course/list/7/type/3.html" target="_blank" title="UI設計">UI設計</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/zh-tw/course/list/7/type/3.html" title="Axure">Axure</a> <a href="//m.sbmmt.com/zh-tw/course/list/7/type/3.html" title="MVC">MVC</a> <a href="//m.sbmmt.com/zh-tw/course/list/7/type/3.html" title="Web Forms">Web Forms</a> <a href="//m.sbmmt.com/zh-tw/course/list/7/type/3.html" title="PS">PS</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/zh-tw/course/list/10/type/3.html" target="_blank" title="電腦基礎">電腦基礎</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/zh-tw/course/list/10/type/3.html" title="設計模式">設計模式</a> <a href="//m.sbmmt.com/zh-tw/course/list/10/type/3.html" title="正規表示式">正規表示式</a> <a href="//m.sbmmt.com/zh-tw/course/list/10/type/3.html" title="HTTP">HTTP</a> <a href="//m.sbmmt.com/zh-tw/course/list/10/type/3.html" title="網站建置指南">網站建置指南</a> <a href="//m.sbmmt.com/zh-tw/course/list/10/type/3.html" title="瀏覽器資訊">瀏覽器資訊</a> <a href="//m.sbmmt.com/zh-tw/course/list/10/type/3.html" title="網站主機">網站主機</a> <a href="//m.sbmmt.com/zh-tw/course/list/10/type/3.html" title="TCP/IP">TCP/IP</a> <a href="//m.sbmmt.com/zh-tw/course/list/10/type/3.html" title="W3C">W3C</a> <a href="//m.sbmmt.com/zh-tw/course/list/10/type/3.html" title="CodeBasic">CodeBasic</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/zh-tw/course/list/6/type/3.html" target="_blank" title="XML">XML</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/zh-tw/course/list/6/type/3.html" title="DTD">DTD</a> <a href="//m.sbmmt.com/zh-tw/course/list/6/type/3.html" title="XML文檔物件模型">XML文檔物件模型</a> <a href="//m.sbmmt.com/zh-tw/course/list/6/type/3.html" title="XSLT">XSLT</a> <a href="//m.sbmmt.com/zh-tw/course/list/6/type/3.html" title="X路徑">X路徑</a> <a href="//m.sbmmt.com/zh-tw/course/list/6/type/3.html" title="X查詢">X查詢</a> <a href="//m.sbmmt.com/zh-tw/course/list/6/type/3.html" title="星聯">星聯</a> <a href="//m.sbmmt.com/zh-tw/course/list/6/type/3.html" title="X指針">X指針</a> <a href="//m.sbmmt.com/zh-tw/course/list/6/type/3.html" title="XML模式">XML模式</a> <a href="//m.sbmmt.com/zh-tw/course/list/6/type/3.html" title="XSL-FO">XSL-FO</a> <a href="//m.sbmmt.com/zh-tw/course/list/6/type/3.html" title="靜止無功發生器">靜止無功發生器</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/zh-tw/course/list/8/type/3.html" target="_blank" title="網頁服務">網頁服務</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/zh-tw/course/list/8/type/3.html" title="Web Services">Web Services</a> <a href="//m.sbmmt.com/zh-tw/course/list/8/type/3.html" title="WSDL">WSDL</a> <a href="//m.sbmmt.com/zh-tw/course/list/8/type/3.html" title="SOAP">SOAP</a> <a href="//m.sbmmt.com/zh-tw/course/list/8/type/3.html" title="RSS">RSS</a> <a href="//m.sbmmt.com/zh-tw/course/list/8/type/3.html" title="RDF">RDF</a> </div> </dd> </dl></li> </ul> </div> </div> <div id="codeMark"></div> <div id="codeMain"> <div class="left"> <div id="codeEditor"></div> <div class="editor-btn"> <div class="editor-btn-inner"> <a href="javascript:;" class="code-btn-submit r" id="J_Commit" title="提交">提交</a> </div> </div> </div> <div class="right"> <div id="codeResult"></div> </div> <div id="close"></div> </div> </body> </html>