XML DOM节点树


XML DOM 把 XML 文档视为一棵节点树。

树中的所有节点彼此之间都有关系。


XML DOM 节点树

XML DOM 把 XML 文档视为一种树结构。这种树结构被称为节点树

可通过这棵树访问所有节点。可以修改或删除它们的内容,也可以创建新的元素。

这颗节点树展示了节点的集合,以及它们之间的联系。这棵树从根节点开始,然后在树的最低层级向文本节点长出枝条:

nodetree.gif

上面的图片表示 XML 文件 books.xml。


父节点、子节点和同级节点

节点树中的节点彼此之间都有层级关系。

父节点、子节点和同级节点用于描述这种关系。父节点拥有子节点,位于相同层级上的子节点称为同级节点(兄弟或姐妹)。

  • 在节点树中,顶端的节点称为根节点

  • 根节点之外的每个节点都有一个父节点

  • 节点可以有任何数量的子节点

  • 叶子是没有子节点的节点

  • 同级节点是拥有相同父节点的节点

下面的图片展示出节点树的一个部分,以及节点间的关系:

navigate.gif

因为 XML 数据是按照树的形式进行构造的,所以可以在不了解树的确切结构且不了解其中包含的数据类型的情况下,对其进行遍历。

您将在本教程稍后的章节学习更多有关遍历节点树的知识。


第一个子节点 - 最后一个子节点

请看下面的 XML 片段:



Everyday Italian
Giada De Laurentiis
2005
30.00

在上面的 XML 中, 元素是 <book> 元素的第一个子节点,而 <price> 元素是 <book> 元素的最后一个子节点。</p> <p>此外,<book> 元素是 <title>、<author>、<year> 和 <price> 元素的父节点。</p> <br> </div> </div> </div> <div class="previous-next-links"> <div class="previous-design-link"> ← <a href="//m.sbmmt.com/xml/xml-nodes.html" rel="prev">DOM 节点</a> </div> <div class="next-design-link"> <a href="//m.sbmmt.com/xml/xml-parser.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>