XML DOM -访问节点


通过 DOM,您能够访问 XML 文档中的每个节点。



tryitimg.gif尝试一下 - 实例


下面的实例使用 XML 文件 books.xml。

函数 loadXMLDoc(),位于外部 JavaScript 中,用于加载 XML 文件。

使用节点列表中的索引号来访问节点
本例使用 getElementsByTagname() 方法来获取 "books.xml" 中的第三个 元素。</p> <p>使用 length 属性来遍历节点<br>本例使用 length 属性来遍历 "books.xml" 中的所有 <title> 元素。</p> <p>查看元素的节点类型<br>本例使用 nodeType 属性来获取 "books.xml" 中根元素的节点类型。</p> <p>遍历元素节点<br>本例使用 nodeType 属性来处理 "books.xml" 中的元素节点。</p> <p>使用节点的关系来遍历元素节点<br>本例使用 nodeType 属性和 nextSibling 属性来处理 "books.xml" 中的元素节点。</p> <hr> <h2>访问节点</h2> <p>您可以通过三种方式来访问节点:</p> <p>1. 通过使用 getElementsByTagName() 方法。</p> <p>2. 通过循环(遍历)节点树。</p> <p>3. 通过利用节点的关系在节点树中导航。</p> <hr> <h2>getElementsByTagName() 方法</h2> <p>getElementsByTagName() 返回拥有指定标签名的所有元素。</p> <h3>语法</h3> <div class="code notranslate"> <div> <em>node</em>.getElementsByTagName( <em>"tagname"</em>); </div> </div> <h3>实例</h3> <p>下面的实例返回 x 元素下的所有 <title> 元素:</p> <div class="code notranslate"> <div> x.getElementsByTagName("title"); </div> </div> <p>请注意,上面的实例仅返回 x 节点下的 <title> 元素。如需返回 XML 文档中的所有 <title> 元素,请使用:</p> <div class="code notranslate"> <div> xmlDoc.getElementsByTagName("title"); </div> </div> <p>在这里,xmlDoc 就是文档本身(文档节点)。</p> <hr> <h2>DOM 节点列表(Node List)</h2> <p>getElementsByTagName() 方法返回节点列表。节点列表是节点的数组。</p> <p>下面的代码使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中,然后在变量 x 中存储 <title> 节点的一个列表:</p> <div class="code notranslate"> <div> xmlDoc=loadXMLDoc("books.xml"); <br> <br>x=xmlDoc.getElementsByTagName("title"); </div> </div> <p>可通过索引号访问 x 中的 <title> 元素。如需访问第三个 <title>,您可以编写:</p> <div class="code notranslate"> <div> y=x[2]; </div> </div> <p><strong>注意:</strong>该索引从 0 开始。</p> <p>在本教程后面的章节中,您将学习更多有关节点列表(Node List)的知识。</p> <hr> <h2>DOM 节点列表长度(Node List Length)</h2> <p>length 属性定义节点列表的长度(即节点的数量)。</p> <p>您可以通过使用 length 属性来遍历节点列表:</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> <ol class=" list-paddingleft-2"> <li><p>使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中</p></li> <li><p>获取所有 <title> 元素节点</p></li> <li><p>输出每个 <title> 元素的文本节点的值</p></li> </ol> <hr> <h2>节点类型(Node Types)</h2> <p>XML 文档的<strong>documentElement</strong>属性是根节点。</p> <p>节点的<strong>nodeName</strong>属性是节点的名称。</p> <p>节点的<strong>nodeType</strong>属性是节点的类型。</p> <p>您将在本教程的下一章中学习更多有关节点属性的知识。</p> <p>尝试一下</p> <hr> <h2>遍历节点</h2> <p>下面的代码遍历根节点的子节点,同时也是元素节点:</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.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></pre> </div> <br> <a target="_blank" href="#" class="showbtn codebtn">运行实例 »</a> <p>点击 "运行实例" 按钮查看在线实例</p> </div> <p>实例解释:</p> <ol class=" list-paddingleft-2"> <li><p>使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中</p></li> <li><p>获取根元素的子节点</p></li> <li><p>检查每个子节点的节点类型。如果节点类型是 "1",则是元素节点</p></li> <li><p>如果是元素节点,则输出节点的名称</p></li> </ol> <hr> <h2>导航节点的关系</h2> <p>下面的代码使用节点关系导航节点树:</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].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></pre> </div> <br> <a target="_blank" href="#" class="showbtn codebtn">运行实例 »</a> <p>点击 "运行实例" 按钮查看在线实例</p> </div> <ol class=" list-paddingleft-2"> <li><p>使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中</p></li> <li><p>获取第一个 book 元素的子节点</p></li> <li><p>把 "y" 变量设置为第一个 book 元素的第一个子节点</p></li> <li><p>对于每个子节点(第一个子节点从 "y" 开始),检查节点类型,如果节点类型为 "1",则是元素节点</p></li> <li><p>如果是元素节点,则输出该节点的名称</p></li> <li><p>把 "y" 变量设置为下一个同级节点,并再次运行循环</p></li> </ol> <br> </div> </div> </div> <div class="previous-next-links"> <div class="previous-design-link"> ← <a href="//m.sbmmt.com/xml/xml-methods.html" rel="prev">DOM 方法</a> </div> <div class="next-design-link"> <a href="//m.sbmmt.com/xml/xml-nodes-info.html" rel="next">DOM 节点信息</a>→ </div> </div> </article> <div class="right-item phpcn-col-md2"> <ul> <li><h3>Tutorial Navigation</h3> <dl class="navigation"> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/course/list/1/type/3.html" target="_blank" title="Big front end">Big front end</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/course/list/1/type/3.html" title="HTML">HTML</a> <a href="//m.sbmmt.com/course/list/1/type/3.html" title="CSS">CSS</a> <a href="//m.sbmmt.com/course/list/1/type/3.html" title="HTML5">HTML5</a> <a href="//m.sbmmt.com/course/list/1/type/3.html" title="CSS3">CSS3</a> <a href="//m.sbmmt.com/course/list/1/type/3.html" title="JavaScript">JavaScript</a> <a href="//m.sbmmt.com/course/list/1/type/3.html" title="jQuery">jQuery</a> <a href="//m.sbmmt.com/course/list/1/type/3.html" title="Vue.js">Vue.js</a> <a href="//m.sbmmt.com/course/list/1/type/3.html" title="React">React</a> <a href="//m.sbmmt.com/course/list/1/type/3.html" title="AngularJS">AngularJS</a> <a href="//m.sbmmt.com/course/list/1/type/3.html" title="Node.js">Node.js</a> <a href="//m.sbmmt.com/course/list/1/type/3.html" title="AJAX">AJAX</a> <a href="//m.sbmmt.com/course/list/1/type/3.html" title="Bootstrap">Bootstrap</a> <a href="//m.sbmmt.com/course/list/1/type/3.html" title="Foundation">Foundation</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/course/list/2/type/3.html" target="_blank" title="JavaScript">JavaScript</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/course/list/2/type/3.html" title="Highcharts">Highcharts</a> <a href="//m.sbmmt.com/course/list/2/type/3.html" title="Maps API">Maps API</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/course/list/3/type/3.html" target="_blank" title="Backend Development">Backend Development</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="PHP">PHP</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="ThinkPHP">ThinkPHP</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="Laravel">Laravel</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="Python">Python</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="Go">Go</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="Java">Java</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="C">C</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="C++">C++</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="C#">C#</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="JSP">JSP</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="Django">Django</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="ASP.NET">ASP.NET</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="ASP">ASP</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="XML">XML</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="Ruby">Ruby</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="Python3">Python3</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="Perl">Perl</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="Servlet">Servlet</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="Lua">Lua</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="Scala">Scala</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="AppML">AppML</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="VBScript">VBScript</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/course/list/4/type/3.html" target="_blank" title="database">database</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/course/list/4/type/3.html" title="MySQL">MySQL</a> <a href="//m.sbmmt.com/course/list/4/type/3.html" title="Redis">Redis</a> <a href="//m.sbmmt.com/course/list/4/type/3.html" title="Oracle">Oracle</a> <a href="//m.sbmmt.com/course/list/4/type/3.html" title="MongoDB">MongoDB</a> <a href="//m.sbmmt.com/course/list/4/type/3.html" title="Memcached">Memcached</a> <a href="//m.sbmmt.com/course/list/4/type/3.html" title="SQL Server">SQL Server</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/course/list/5/type/3.html" target="_blank" title="Mobile terminal">Mobile terminal</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/course/list/5/type/3.html" title="Applets">Applets</a> <a href="//m.sbmmt.com/course/list/5/type/3.html" title="uni-app">uni-app</a> <a href="//m.sbmmt.com/course/list/5/type/3.html" title="Flutter">Flutter</a> <a href="//m.sbmmt.com/course/list/5/type/3.html" title="Android">Android</a> <a href="//m.sbmmt.com/course/list/5/type/3.html" title="iOS">iOS</a> <a href="//m.sbmmt.com/course/list/5/type/3.html" title="Swift">Swift</a> <a href="//m.sbmmt.com/course/list/5/type/3.html" title="other">other</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/course/list/9/type/3.html" target="_blank" title="Operation and maintenance development">Operation and maintenance development</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/course/list/9/type/3.html" title="Linux">Linux</a> <a href="//m.sbmmt.com/course/list/9/type/3.html" title="Docker">Docker</a> <a href="//m.sbmmt.com/course/list/9/type/3.html" title="PhpStudy">PhpStudy</a> <a href="//m.sbmmt.com/course/list/9/type/3.html" title="Git">Git</a> <a href="//m.sbmmt.com/course/list/9/type/3.html" title="Other tools">Other tools</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/course/list/7/type/3.html" target="_blank" title="UI design">UI design</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/course/list/7/type/3.html" title="Axure">Axure</a> <a href="//m.sbmmt.com/course/list/7/type/3.html" title="MVC">MVC</a> <a href="//m.sbmmt.com/course/list/7/type/3.html" title="Web Forms">Web Forms</a> <a href="//m.sbmmt.com/course/list/7/type/3.html" title="PS">PS</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/course/list/10/type/3.html" target="_blank" title="Computer Basics">Computer Basics</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/course/list/10/type/3.html" title="Design Patterns">Design Patterns</a> <a href="//m.sbmmt.com/course/list/10/type/3.html" title="regular expression">regular expression</a> <a href="//m.sbmmt.com/course/list/10/type/3.html" title="HTTP">HTTP</a> <a href="//m.sbmmt.com/course/list/10/type/3.html" title="Website Building Guide">Website Building Guide</a> <a href="//m.sbmmt.com/course/list/10/type/3.html" title="Browser information">Browser information</a> <a href="//m.sbmmt.com/course/list/10/type/3.html" title="website host">website host</a> <a href="//m.sbmmt.com/course/list/10/type/3.html" title="TCP/IP">TCP/IP</a> <a href="//m.sbmmt.com/course/list/10/type/3.html" title="W3C">W3C</a> <a href="//m.sbmmt.com/course/list/10/type/3.html" title="CodeBasic">CodeBasic</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/course/list/6/type/3.html" target="_blank" title="XML">XML</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/course/list/6/type/3.html" title="DTD">DTD</a> <a href="//m.sbmmt.com/course/list/6/type/3.html" title="XML DOM">XML DOM</a> <a href="//m.sbmmt.com/course/list/6/type/3.html" title="XSLT">XSLT</a> <a href="//m.sbmmt.com/course/list/6/type/3.html" title="XPath">XPath</a> <a href="//m.sbmmt.com/course/list/6/type/3.html" title="XQuery">XQuery</a> <a href="//m.sbmmt.com/course/list/6/type/3.html" title="XLink">XLink</a> <a href="//m.sbmmt.com/course/list/6/type/3.html" title="XPointer">XPointer</a> <a href="//m.sbmmt.com/course/list/6/type/3.html" title="XML Schema">XML Schema</a> <a href="//m.sbmmt.com/course/list/6/type/3.html" title="XSL-FO">XSL-FO</a> <a href="//m.sbmmt.com/course/list/6/type/3.html" title="SVG">SVG</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/course/list/8/type/3.html" target="_blank" title="Web Services">Web Services</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/course/list/8/type/3.html" title="Web Services">Web Services</a> <a href="//m.sbmmt.com/course/list/8/type/3.html" title="WSDL">WSDL</a> <a href="//m.sbmmt.com/course/list/8/type/3.html" title="SOAP">SOAP</a> <a href="//m.sbmmt.com/course/list/8/type/3.html" title="RSS">RSS</a> <a href="//m.sbmmt.com/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="submit">submit</a> </div> </div> </div> <div class="right"> <div id="codeResult"></div> </div> <div id="close"></div> </div> </body> </html>