疯狂XML学习笔记(13)---------XML DOM

XML 文档对象模型定义访问和操作XML文档的标准方法。

DOM 将 XML 文档作为一个树形结构,而树叶被定义为节点。

什么是 XML DOM?

XML DOM 是:

  • 用于 XML 的标准对象模型

  • 用于 XML 的标准编程接口

  • 中立于平台和语言

  • W3C 的标准

XML DOM 定义了所有 XML 元素的对象和属性,以及访问它们的方法(接口)

换句话说:

XML DOM 是用于获取、更改、添加或删除 XML 元素的标准。

XML DOM 节点


XML 文档中的每个成分都是一个节点。

节点

根据 DOM,XML 文档中的每个成分都是一个节点

DOM 是这样规定的:

  • 整个文档是一个文档节点

  • 每个 XML 标签是一个元素节点

  • 包含在 XML 元素中的文本是文本节点

  • 每一个 XML 属性是一个属性节点

  • 注释属于注释节点

DOM 实例

请看下面的 XML 文件 (books.xml):

<?xml version="1.0" encoding="ISO-8859-1"?>

<bookstore>

<book category="children">
  <title lang="en">Harry Potter</title> 
  <author>J K. Rowling</author> 
  <year>2005</year> 
  <price>29.99</price> 
</book>

<book category="cooking">
  <title lang="en">Everyday Italian</title> 
  <author>Giada De Laurentiis</author> 
  <year>2005</year> 
  <price>30.00</price> 
</book>

<book category="web">
  <title lang="en">Learning XML</title> 
  <author>Erik T. Ray</author> 
  <year>2003</year> 
  <price>39.95</price> 
</book>

<book category="web">
  <title lang="en">XQuery Kick Start</title> 
  <author>James McGovern</author> 
  <author>Per Bothner</author> 
  <author>Kurt Cagle</author> 
  <author>James Linn</author> 
  <author>Vaidyanathan Nagarajan</author> 
  <year>2003</year> 
  <price>49.99</price> 
</book>

</bookstore>

在上面的 XML 中,根节点是 。文档中的所有其他节点都被包含在 中。

根节点 有四个 节点。

第一个 节点有四个节点:, <author>, <year> 以及 <price>,其中每个节点都包含一个文本节点,"Harry Potter", "J K. Rowling", "2005" 以及 "29.99"。</span></p><p></p><h2><span style="font-size:18px">文本总是存储在文本节点中</span></h2><p></p><p><span style="font-size:18px">在 DOM 处理中一个普遍的错误是,认为元素节点包含文本。</span></p><p><span style="font-size:18px">不过,元素节点的文本是存储在文本节点中的。</span></p><p><span style="font-size:18px">在这个例子中:<em><year>2005</year></em>,元素节点 <year>,拥有一个值为 "2005" 的文本节点。</span></p><p><span style="font-size:18px">"2005" <em>不是</em> <year> 元素的值!</span></p><p><span style="font-size:18px"></span> </p><p><strong><span style="font-size:18px">XML DOM 节点树</span></strong></p><p><strong><span style="font-size:18px"></span></strong> </p><p><br></p><p><strong><span style="font-size:18px">XML DOM 把 XML DOM 文档视为一棵节点树 (node-tree)。</span></strong></p><p><strong><span style="font-size:18px">树中的所有节点彼此之间都有关系。</span></strong></p><p></p><h2><span style="font-size:18px">XML DOM 节点树</span></h2><p></p><p><span style="font-size:18px">XML DOM 把 XML 文档视为一种树结构。这种树结构被称为<em>节点树</em>。</span></p><p><span style="font-size:18px">可通过这棵树访问所有节点。可以修改或删除它们的内容,也可以创建新的元素。</span></p><p><span style="font-size:18px">这颗节点树展示了节点的集合,以及它们之间的联系。这棵树从根节点开始,然后在树的最低层级向文本节点长出枝条:</span></p><p><span style="font-size:18px"><img alt="DOM node tree" src></span></p><p><span style="max-width:90%">上面的图片表示 XML 文件 </span><span style="font-size:18px">books.xml</span><span style="font-size:18px">。</span></p><p></p><h2><span style="font-size:18px">父、子和同级节点</span></h2><p></p><p><span style="font-size:18px">节点树中的节点彼此之间都有等级关系。</span></p><p><span style="font-size:18px">父、子和同级节点用于描述这种关系。父节点拥有子节点,位于相同层级上的子节点称为同级节点(兄弟或姐妹)。</span></p><ul class=" list-paddingleft-2"><li><p><span style="font-size:18px">在节点树中,顶端的节点成为根节点 </span></p></li><li><p><span style="font-size:18px">根节点之外的每个节点都有一个父节点 </span></p></li><li><p><span style="font-size:18px">节点可以有任何数量的子节点 </span></p></li><li><p><span style="font-size:18px">叶子是没有子节点的节点 </span></p></li><li><p><span style="font-size:18px">同级节点是拥有相同父节点的节点 </span></p></li></ul><p><span style="font-size:18px">下面的图片展示出节点树的一个部分,以及节点间的关系:</span></p><p><span style="font-size:18px"><img alt="node tree" src></span></p><p><span style="max-width:90%">因为 XML 数据是按照树的形式进行构造的,所以可以在不了解树的确切结构且不了解其中包含的数据类型的情况下,对其进行遍历。</span></p><p><span style="font-size:18px">您将在本教程稍后的章节学习更多有关遍历节点树的知识。</span></p><p class="note"><span style="font-size:18px">注释:父节点:Parent Node,子节点:Children Node,同级节点:Sibling Node。</span></p><p></p><h2><span style="font-size:18px">第一个子节点 - 最后一个子节点</span></h2><p></p><p><span style="font-size:18px">请看下面的 XML 片段:</span></p><pre><bookstore> <book category="CHILDREN"> <title lang="en">Harry Potter</title> <author>J K. Rowling</author> <year>2005</year> <price>29.99</price> </book> </bookstore></pre><p><span style="font-size:18px">在上面的 XML 中,<title> 元素是 <book> 元素的第一个子节点,而 <price> 元素是 <book> 元素的最后一个子节点。</span></p><p><span style="font-size:18px">此外,<book> 元素是 <title>、<author>、<year> 以及 <price> 元素的父节点。</span></p><p><span style="font-size:18px"></span> </p><p><span style="font-size:18px"></span> </p><p><strong><span style="font-size:18px">解析 XML DOM</span></strong></p><p><strong><span style="font-size:18px"></span></strong> </p><p></p><h2><span style="font-size:18px">解析 XML</span></h2><p></p><p><span style="font-size:18px">所有现代浏览器都内建了用于读取和操作 XML 的 XML 解析器。</span></p><p><span style="font-size:18px">解析器把 XML 读入内存,并把它转换为可被 JavaScript 访问的 XML DOM 对象。</span></p><p><span style="font-size:18px">微软的 XML 解析器与其他浏览器中的解析器是有差异的。微软的解析器支持对 XML 文件和 XML 字符串(文本)的加载,而其他浏览器使用单独的解析器。不过,所有的解析器都含有遍历 XML 树、访问、插入及删除节点的函数。</span></p><p><span style="font-size:18px">在本教程中,我们将为您讲解如何创建可在 IE 及其他浏览器中运行的脚本。</span></p><p></p><h2><span style="font-size:18px">通过微软的 XML 解析器加载 XML</span></h2><p></p><p><span style="font-size:18px">微软的 XML 解析器内建于 Internet Explorer 5 及更高版本中。</span></p><p><span style="font-size:18px">下面的 JavaScript 片段把 XML 文档 ("</span><span style="font-size:18px">books.xml</span><span style="font-size:18px">") 载入了解析器:</span></p><pre>xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async="false"; xmlDoc.load("books.xml");</pre><h3><span style="font-size:18px">代码解释:</span></h3><ul class=" list-paddingleft-2"><li><p><span style="font-size:18px">第一行创建空的微软 XML 文档对象 </span></p></li><li><p><span style="font-size:18px">第二行关闭异步加载,这样可确保在文档完整加载之前,解析器不会继续执行脚本 </span></p></li><li><p><span style="font-size:18px">第三行告知解析器加载名为 "books.xml" 的文档 </span></p></li></ul><p><span style="font-size:18px">下面的 JavaScript 片段把名为 txt 的字符串载入解析器中:</span></p><pre>xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async="false"; xmlDoc.loadXML(txt);</pre><p class="note"><span style="font-size:18px">注释:<em>loadXML()</em> 方法用于加载字符串(文本),而<em>load()</em> 用于加载文件。</span></p><p></p><h2><span style="font-size:18px">在 Firefox 及其他浏览器中的 XML 解析器</span></h2><p></p><p><span style="font-size:18px">下面的 JavaScript 片段把 XML 文档 ("</span><span style="font-size:18px">books.xml</span><span style="font-size:18px">") 载入了解析器:</span></p><pre>xmlDoc=document.implementation.createDocument("","",null); xmlDoc.async="false"; xmlDoc.load("books.xml");</pre><h3><span style="font-size:18px">代码解释:</span></h3><ul class=" list-paddingleft-2"><li><p><span style="font-size:18px">第一行创建空的 XML 文档对象 </span></p></li><li><p><span style="font-size:18px">第二行关闭异步加载,这样可确保在文档完整加载之前,解析器不会继续执行脚本 </span></p></li><li><p><span style="font-size:18px">第三行告知解析器加载名为 "books.xml" 的文档 </span></p></li></ul><p><span style="font-size:18px">下面的 JavaScript 片段把名为 txt 的字符串载入解析器中:</span></p><pre>parser=new DOMParser(); xmlDoc=parser.parseFromString(txt,"text/xml");</pre><h3><span style="font-size:18px">代码解释:</span></h3><ul class=" list-paddingleft-2"><li><p><span style="font-size:18px">第一行创建一个空的 XML 文档对象 </span></p></li><li><p><span style="font-size:18px">第二行告知解析器加载名为 txt 的字符串 </span></p></li></ul><p class="note"><span style="font-size:18px">注释:Internet Explorer 使用<em>loadXML()</em> 方法来解析 XML 字符串,而其他浏览器使用 <em>DOMParser</em> 对象。</span></p><p></p><h2><span style="font-size:18px">解析 XML 文件 - 一个跨浏览器的实例</span></h2><p></p><p><span style="font-size:18px">下面的例子把 XML 文档 ("</span><span style="font-size:18px">books.xml</span><span style="font-size:18px">") 载入 XML 解析器:</span></p><pre><html> <body> <script type="text/javascript"> try //Internet Explorer { xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); } catch(e) { try //Firefox, Mozilla, Opera, etc. { xmlDoc=document.implementation.createDocument("","",null); } catch(e) {alert(e.message)} } try { xmlDoc.async=false; xmlDoc.load("books.xml"); document.write("xmlDoc is loaded, ready for use"); } catch(e) {alert(e.message)} </script> </body> </html></pre><p> </p><p></p><h2><span style="font-size:18px">Error: Access Across Domains </span></h2><p></p><p><span style="font-size:18px">出于安全方面的原因,现代的浏览器不允许跨域的访问。</span></p><p><span style="font-size:18px">这意味着,网页以及它试图加载的 XML 文件,都必须位于相同的服务器上。</span></p><p><span style="font-size:18px">W3School 的实例所打开的 XML 文件位于 W3School 的域上。</span></p><p><span style="font-size:18px">假如你打算在自己的网页上使用上面的例子,则必须把 XML 文件放到自己的服务器上。否则,xmlDoc.load() 将产生错误 "Access is denied"。</span></p><p></p><h2><span style="font-size:18px">解析 XML 字符串 - 一个跨浏览器的实例</span></h2><p></p><p><span style="font-size:18px">下面的代码加载并解析了一个 XML 字符串:</span></p><pre><html> <body> <script type="text/javascript"> text="<bookstore>" text=text+"<book>"; text=text+"<title>Harry Potter</title>"; text=text+"<author>J K. Rowling</author>"; text=text+"<year>2005</year>"; text=text+"</book>"; text=text+"</bookstore>"; try //Internet Explorer { xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async="false"; xmlDoc.loadXML(text); } catch(e) { try //Firefox, Mozilla, Opera, etc. { parser=new DOMParser(); xmlDoc=parser.parseFromString(text,"text/xml"); } catch(e) {alert(e.message)} } document.write("xmlDoc is loaded, ready for use"); </script> </body> </html></pre><p><span style="font-size:18px"></span> </p><p><strong><span style="font-size:18px">XML DOM 加载函数</span></strong></p><p><strong><span style="font-size:18px"></span></strong> </p><p></p><h2><span style="font-size:18px">加载函数</span></h2><p></p><p><span style="font-size:18px">XML DOM 含有遍历 XML 树以及访问、插入、删除节点的方法(函数)。</span></p><p><span style="font-size:18px">然后,在访问并处理 XML 文档之前,必须把它载入 XML DOM 对象。</span></p><p><span style="font-size:18px">上一节演示了如何加载 XML 文档。为了避免因加载文档而重复编写代码,可以把代码存储在一个单独的 JavaScript 文件中:</span></p><pre>function loadXMLDoc(dname) { try //Internet Explorer { xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); } catch(e) { try //Firefox, Mozilla, Opera, etc. { xmlDoc=document.implementation.createDocument("","",null); } catch(e) {alert(e.message)} } try { xmlDoc.async=false; xmlDoc.load(dname); return(xmlDoc); } catch(e) {alert(e.message)} return(null); }</pre><p><span style="font-size:18px">上面的函数存储在名为 "/Uploads/loadxmldoc.js" 的文件中。</span></p><p><span style="font-size:18px">下面的例子在其 <head> 部分有一个指向 "/Uploads/loadxmldoc.js" 的链接,并使用 loadXMLDoc() 函数加载 XML 文档 ("books.xml"):</span></p><pre><html> <head><script type="text/javascript" src="/Uploads/loadxmldoc.js"></script> </head> <body> <script type="text/javascript"> xmlDoc=loadXMLDoc("books.xml"); document.write("xmlDoc is loaded, ready for use"); </script> </body> </html></pre><p><span style="font-size:18px"></span> </p><p><span style="font-size:18px"></span> </p><p><span style="font-size:18px"></span> </p><p><strong><span style="font-size:18px">XML DOM - 属性和方法</span></strong></p><p><strong><span style="font-size:18px"></span></strong> </p><p></p><h2><span style="font-size:18px">编程接口</span></h2><p></p><p><span style="font-size:18px">DOM 把 XML 模拟为一系列节点接口。可通过 JavaScript 或其他编程语言来访问节点。在本教程中,我们使用 JavaScript。</span></p><p><span style="font-size:18px">对 DOM 的编程接口是通过一套标准的属性和方法来定义的。</span></p><p><span style="font-size:18px"><em>属性</em>经常按照“某事物是什么”的方式来使用(例如节点名是 "book")。</span></p><p><span style="font-size:18px"><em>方法</em>经常按照“对某事物做什么”的方式来使用(例如删除 "book" 节点)。</span></p><p></p><h2><span style="font-size:18px">XML DOM 属性</span></h2><p></p><p><span style="font-size:18px">一些典型的 DOM 属性: </span></p><ul class=" list-paddingleft-2"><li><p><span style="font-size:18px">x.nodeName - x 的名称 </span></p></li><li><p><span style="font-size:18px">x.nodeValue - x 的值 </span></p></li><li><p><span style="font-size:18px">x.parentNode - x 的父节点 </span></p></li><li><p><span style="font-size:18px">x.childNodes - x 的子节点 </span></p></li><li><p><span style="font-size:18px">x.attributes - x 的属性节点 </span></p></li></ul><p><br></p><p><span style="font-size:18px"></span></p><p class="note"><span style="font-size:18px">注释:在上面的列表中,x 是一个节点对象。</span></p><p></p><h2><span style="font-size:18px">XML DOM 方法</span></h2><ul class=" list-paddingleft-2"><li><p><span style="font-size:18px">x.getElementsByTagName(name) - 获取带有指定标签名称的所有元素 </span></p></li><li><p><span style="font-size:18px">x.appendChild(node) - 向 x 插入子节点 </span></p></li><li><p><span style="font-size:18px">x.removeChild(node) - 从 x 删除子节点 </span></p></li></ul><p></p><p class="note"><span style="font-size:18px">注释:在上面的列表中,x 是一个节点对象。</span></p><p></p><h2><span style="font-size:18px">实例</span></h2><p></p><p><span style="font-size:18px">从 books.xml 中的 <title> 元素获取文本的 JavaScript 代码:</span></p><pre>txt=xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue</pre><p><span style="font-size:18px">在此语句执行后,txt 保存的值是 "Everyday Italian"。</span></p><h3><span style="font-size:18px">解释:</span></h3><ul class=" list-paddingleft-2"><li><p><span style="font-size:18px"><em>xmlDoc</em> - 由解析器创建的 XML DOM </span></p></li><li><p><span style="font-size:18px"><em>getElementsByTagName("title")[0]</em> - 第一个 <title> 元素</span></p></li><li><p><span style="font-size:18px"><em>childNodes[0]</em> - <title> 元素的第一个子节点 (文本节点)</span></p></li><li><p><span style="font-size:18px"><em>nodeValue</em> - 节点的值 (文本自身) </span></p></li></ul><p><span style="font-size:18px">在上面的例子中,getElementsByTagName 是方法,而 childNodes 和 nodeValue 是属性。</span></p><p></p><h2><span style="font-size:18px">解析 XML 文件 - 跨浏览器实例</span></h2><p></p><p><span style="font-size:18px">下面的代码片段使用 loadXMLDoc 函数把 </span><span style="font-size:18px">books.xml</span><span style="font-size:18px"> 载入 XML 解析器中,并显示第一个 book 的数据:</span></p><pre>xmlDoc=loadXMLDoc("books.xml"); document.write(xmlDoc.getElementsByTagName("title") [0].childNodes[0].nodeValue); document.write("<br />"); document.write(xmlDoc.getElementsByTagName("author") [0].childNodes[0].nodeValue); document.write("<br />"); document.write(xmlDoc.getElementsByTagName("year") [0].childNodes[0].nodeValue);</pre><p><span style="font-size:18px">输出:</span></p><pre>Harry Potter J K. Rowling 2005</pre><p> </p><p><span style="font-size:18px">在上面的例子中,我们为每个文本节点使用 childNodes[0],即使每个元素只有一个文本节点。这是由于 getElementsByTagName() 方法总是会返回数组。</span></p><p></p><h2><span style="font-size:18px">解析 XML 字符串 - 跨浏览器实例</span></h2><p></p><p><span style="font-size:18px">下面的代码加载并解析一个 XML 字符串:</span></p><p><span style="font-size:18px">下面的代码片段使用 loadXMLString 函数把 </span><span style="font-size:18px">books.xml</span><span style="font-size:18px"> 载入 XML 解析器,并显示第一个 book 的数据:</span></p><pre>text="<bookstore>" text=text+"<book>"; text=text+"<title>Harry Potter</title>"; text=text+"<author>J K. Rowling</author>"; text=text+"<year>2005</year>"; text=text+"</book>"; text=text+"</bookstore>"; xmlDoc=loadXMLString(text); document.write(xmlDoc.getElementsByTagName("title") [0].childNodes[0].nodeValue); document.write("<br />"); document.write(xmlDoc.getElementsByTagName("author") [0].childNodes[0].nodeValue); document.write("<br />"); document.write(xmlDoc.getElementsByTagName("year") [0].childNodes[0].nodeValue);</pre><p><span style="font-size:18px">输出:</span></p><pre>Harry Potter J K. Rowling 2005</pre><p><span style="font-size:18px"></span> </p><p><span style="font-size:18px"></span> </p><p><span style="font-size:18px"></span> </p><p></p><h2><span style="font-size:18px">访问节点</span></h2><p></p><p><span style="font-size:18px">您可以通过三种方法来访问节点:</span></p><ol class=" list-paddingleft-2"><li><p><span style="font-size:18px">通过使用 getElementsByTagName() 方法 </span></p></li><li><p><span style="font-size:18px">通过循环(遍历)节点树 </span></p></li><li><p><span style="font-size:18px">通过利用节点的关系在节点树中导航 </span></p></li></ol><p></p><h2><span style="font-size:18px">getElementsByTagName() 方法</span></h2><p></p><p><span style="font-size:18px">getElementsByTagName() 返回拥有指定标签名的所有元素。</span></p><h3><span style="font-size:18px">语法</span></h3><pre>node.getElementsByTagName("tagname");</pre><h3><span style="font-size:18px">实例</span></h3><p><span style="font-size:18px">下面的例子返回 x 元素下的所有 <title> 元素:</span></p><pre>x.getElementsByTagName("title");</pre><p><span style="font-size:18px">请注意,上面的例子仅返回 x 节点下的 <title> 元素。要返回 XML 文档中的所有 <title> 元素,请使用:</span></p><pre>xmlDoc.getElementsByTagName("title");</pre><p><span style="font-size:18px">在这里,xmlDoc 就是文档本身(文档节点)。</span></p><p></p><h2><span style="font-size:18px">DOM Node List</span></h2><p></p><p><span style="font-size:18px">getElementsByTagName() 方法返回节点列表 (node list)。节点列表是节点的数组。</span></p><p><span style="font-size:18px">下面的代码通过使用 </span><span style="font-size:18px">loadXMLDoc()</span><span style="font-size:18px"> 把 "</span><span style="font-size:18px">books.xml</span><span style="font-size:18px">" 载入 xmlDoc 中,然后在变量 x 中存储 <title> 节点的一个列表:</span></p><pre>xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName("title");</pre><p><span style="font-size:18px">可通过下标访问 x 中的 <title> 元素。要访问第三个 <title>,您可以编写:</span></p><pre>y=x[2];</pre><p> </p><p class="note"><span style="font-size:18px">注释:下标以 0 起始。</span></p><p><span style="font-size:18px">在本教程中稍后的章节,您将学到更多有关 Node List 的知识。</span></p><p></p><h2><span style="font-size:18px">DOM Node List Length</span></h2><p></p><p><span style="font-size:18px">length 属性定义节点列表的长度(即节点的数目)。</span></p><p><span style="font-size:18px">您能够通过使用 length 属性来循环一个节点列表:</span></p><pre>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 />"); }</pre><h3><span style="font-size:18px">例子解释:</span></h3><ol class=" list-paddingleft-2"><li><p><span style="font-size:18px">使用 </span><span style="font-size:18px">loadXMLDoc()</span><span style="font-size:18px"> 把 "</span><span style="font-size:18px">books.xml</span><span style="font-size:18px">" 载入 xmlDoc </span></p></li><li><p><span style="font-size:18px">取得所有 <title> 元素节点 </span></p></li><li><p><span style="font-size:18px">输出每个 <title> 元素的文本节点的值 </span></p></li></ol><p> </p><p></p><h2><span style="font-size:18px">Node Type</span></h2><p></p><p><span style="font-size:18px">XML 文档的 <em>documentElement</em> 属性是根节点。</span></p><p><span style="font-size:18px">节点的 <em>nodeName</em> 属性是节点的名称。</span></p><p><span style="font-size:18px">节点的 <em>nodeType</em> 属性是节点的类型。</span></p><p><span style="font-size:18px">您将在本教程的下一节中学习更多有关节点属性的知识。</span></p><p> </p><p></p><h2><span style="font-size:18px">遍历节点</span></h2><p></p><p><span style="font-size:18px">下面的代码循环根节点的子节点,同时也是元素节点:</span></p><pre>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 />"); } }</pre><h3><span style="font-size:18px">例子解释:</span></h3><ol class=" list-paddingleft-2"><li><p><span style="font-size:18px">通过使用 </span><span style="font-size:18px">loadXMLDoc()</span><span style="font-size:18px"> 把 "</span><span style="font-size:18px">books.xml</span><span style="font-size:18px">" 载入 xmlDoc 中 </span></p></li><li><p><span style="font-size:18px">获得根元素的子节点 </span></p></li><li><p><span style="font-size:18px">检查每个子节点的节点类型。如果节点类型是 "1",则是元素节点 </span></p></li><li><p><span style="font-size:18px">如果是元素节点,则输出节点的名称 </span></p></li></ol><p> </p><h2><span style="font-size:18px">利用节点的关系进行导航</span></h2><p><span style="font-size:18px">下面的代码通过利用节点的关系在节点树中进行导航:</span></p><pre>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; }</pre><ol class=" list-paddingleft-2"><li><p><span style="font-size:18px">通过使用 </span><span style="font-size:18px">loadXMLDoc()</span><span style="font-size:18px"> 把 "</span><span style="font-size:18px">books.xml</span><span style="font-size:18px">" 载入 xmlDoc 中 </span></p></li><li><p><span style="font-size:18px">获得第一个 book 元素的子节点 </span></p></li><li><p><span style="font-size:18px">把 "y" 变量设置为第一个 book 元素的第一个子节点 </span></p></li><li><p><span style="font-size:18px">检查每个子节点的节点类型,如果节点类型是 "1",则是元素节点 </span></p></li><li><p><span style="font-size:18px">如果是元素节点,则输出该节点的名称 </span></p></li><li><p><span style="font-size:18px">把 "y" 变量设置为下一个同级节点,并再次运行循环 </span></p></li></ol><p><span style="font-size:18px"></span> </p><p></p><h2><span style="font-size:18px">节点的属性</span></h2><p></p><p><span style="font-size:18px">在 XML 文档对象模型 (DOM) 中,每个节点都是一个<em>对象</em>。</span></p><p><span style="font-size:18px">对象拥有方法(功能)和属性(关于对象的信息),并可通过 JavaScript 进行访问和操作。</span></p><p><span style="font-size:18px">三个重要的 XML DOM 节点属性是:</span></p><ul class=" list-paddingleft-2"><li><p><span style="font-size:18px">nodeName </span></p></li><li><p><span style="font-size:18px">nodeValue </span></p></li><li><p><span style="font-size:18px">nodeType </span></p></li></ul><p></p><h2><span style="font-size:18px">nodeName 属性</span></h2><p></p><p><span style="font-size:18px">nodeName 属性规定节点的名称。</span></p><ul class=" list-paddingleft-2"><li><p><span style="font-size:18px">nodeName 是只读的 </span></p></li><li><p><span style="font-size:18px">元素节点的 nodeName 与标签名相同 </span></p></li><li><p><span style="font-size:18px">属性节点的 nodeName 是属性的名称 </span></p></li><li><p><span style="font-size:18px">文本节点的 nodeName 永远是 #text </span></p></li><li><p><span style="font-size:18px">文档节点的 nodeName 永远是 #document </span></p></li></ul><p> </p><p></p><h2><span style="font-size:18px">nodeValue 属性</span></h2><p></p><p><span style="font-size:18px">nodeValue 属性规定节点的值。</span></p><ul class=" list-paddingleft-2"><li><p><span style="font-size:18px">元素节点的 nodeValue 是 undefined </span></p></li><li><p><span style="font-size:18px">文本节点的 nodeValue 是文本自身 </span></p></li><li><p><span style="font-size:18px">属性节点的 nodeValue 是属性的值 </span></p></li></ul><p></p><h2><span style="font-size:18px">例子 1:获取元素的值</span></h2><p></p><p><span style="font-size:18px">下面的代码检索第一个 <title> 元素的文本节点的值:</span></p><pre>xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName("title")[0].childNodes[0]; txt=x.nodeValue;</pre><p><span style="font-size:18px">结果:txt = "Everyday Italian"</span></p><h3><span style="font-size:18px">代码解释:</span></h3><ul class=" list-paddingleft-2"><li><p><span style="font-size:18px">通过使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中 </span></p></li><li><p><span style="font-size:18px">获取第一个 <title> 元素节点的文本节点 </span></p></li><li><p><span style="font-size:18px">把 txt 变量设置为文本节点的值 </span></p></li></ul><p> </p><p></p><h2><span style="font-size:18px">例子 2:更改元素的值</span></h2><p></p><p><span style="font-size:18px">下面的代码更改第一个 <title> 元素的文本节点的值:</span></p><pre>xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName("title")[0].childNodes[0]; x.nodeValue="Easy Cooking";</pre><h3><span style="font-size:18px">代码解释:</span></h3><ul class=" list-paddingleft-2"><li><p><span style="font-size:18px">通过使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中 </span></p></li><li><p><span style="font-size:18px">获取第一个 <title> 元素节点的文本节点 </span></p></li><li><p><span style="font-size:18px">把文本节点的值更改为 "Easy Cooking" </span></p></li></ul><p> </p><p></p><h2><span style="font-size:18px">nodeType 属性</span></h2><p></p><p><span style="font-size:18px">nodeType 属性规定节点的类型。</span></p><p><span style="font-size:18px">nodeType 是只读的。</span></p><h3><span style="font-size:18px">最重要的节点类型是:</span></h3><table class="dataintable" style="width:40%"><tbody><tr class="firstRow"><th><span style="font-size:18px">元素类型</span></th><th><span style="font-size:18px">节点类型</span></th></tr><tr><td><span style="font-size:18px">元素</span></td><td><span style="font-size:18px">1</span></td></tr><tr><td><span style="font-size:18px">属性</span></td><td><span style="font-size:18px">2</span></td></tr><tr><td><span style="font-size:18px">文本</span></td><td><span style="font-size:18px">3</span></td></tr><tr><td><span style="font-size:18px">注释</span></td><td><span style="font-size:18px">8</span></td></tr><tr><td><span style="font-size:18px">文档</span></td><td><span style="font-size:18px">9</span></td></tr></tbody></table><p> </p><p><span style="font-size:18px"></span> </p><p></p><h2><span style="font-size:18px">DOM Node List</span></h2><p></p><p><span style="font-size:18px">当使用诸如 childNodes 或 getElementsByTagName() 属性或方法时,会返回 NodeList 对象。</span></p><p><span style="font-size:18px">NodeList 对象表示节点的列表,以 XML 中的相同顺序。</span></p><p><span style="font-size:18px">使用从 0 开始的下标来访问节点列表中的节点。</span></p><p><span style="font-size:18px">下面的图像表示 "</span><span style="font-size:18px">books.xml</span><span style="font-size:18px">" 中 <title> 元素的节点列表:</span></p><p><span style="font-size:18px"><img alt="DOM node list" src></span></p><p><span style="max-width:90%">下面的代码片段通过使用 </span><span style="font-size:18px">loadXMLDoc()</span><span style="font-size:18px"> 把 "books.xml" 载入 xmlDoc 中,并返回 "</span><span style="font-size:18px">books.xml</span><span style="font-size:18px">" 中 title 元素的一个节点列表:</span></p><pre>xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName("title");</pre><p><span style="font-size:18px">以上语句执行之后,x 成为一个 NodeList 对象。</span></p><p><span style="font-size:18px">下面的代码片段从节点列表 x 中的第一个 <title> 元素中返回文本:</span></p><pre>txt=x[0].childNodes[0].nodeValue;</pre><p><span style="font-size:18px">在以上语句执行之后,txt = "Everyday Italian"。</span></p><p><span style="font-size:18px"></span> </p><p></p><h2><span style="font-size:18px">Node List Length</span></h2><p></p><p><span style="font-size:18px">NodeList 对象会保持自身的更新。如果删除或添加了元素,列表会自动更新。</span></p><p><span style="font-size:18px">节点列表的 length 属性是列表中节点的数量。</span></p><p><span style="font-size:18px">下面的代码片段通过使用 </span><span style="font-size:18px">loadXMLDoc()</span><span style="font-size:18px"> 把 "</span><span style="font-size:18px">books.xml</span><span style="font-size:18px">" 载入 xmlDoc,并返回 "books.xml" 中 <title> 元素的数量:</span></p><pre>xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName('title').length;</pre><p><span style="font-size:18px">在上面的语句执行之后,x = 4。</span></p><p><span style="font-size:18px">节点列表的长度可用于循环列表中所有的元素。</span></p><p><span style="font-size:18px">下面的代码片段使用 length 属性来遍历 <title> 元素的列表:</span></p><pre>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("<br />"); }</pre><p><span style="font-size:18px">输出:</span></p><pre>Harry Potter Everyday Italian XQuery Kick Start Learning XML</pre><h3><span style="font-size:18px">例子解释:</span></h3><ul class=" list-paddingleft-2"><li><p><span style="font-size:18px">通过使用 </span><span style="font-size:18px">loadXMLDoc()</span><span style="font-size:18px"> 把 "</span><span style="font-size:18px">books.xml</span><span style="font-size:18px">" 载入 xmlDoc </span></p></li><li><p><span style="font-size:18px">设置保存所有 title 元素的节点列表的 x 变量 </span></p></li><li><p><span style="font-size:18px">从所有 <title> 元素的文本节点输出值 </span></p></li></ul><p> </p><p></p><h2><span style="font-size:18px">DOM Attribute List (Named Node Map)</span></h2><p></p><p><span style="font-size:18px">元素节点的 attributes 属性返回属性节点的列表。</span></p><p><span style="font-size:18px">这被称为 Named Node Map,除了方法和属性上的一些差别以外,它与节点列表相似。</span></p><p><span style="font-size:18px">属性列表会保持自身的更新。如果删除或添加属性,这个列表会自动更新。</span></p><p><span style="font-size:18px">下面的代码片段通过使用 </span><span style="font-size:18px">loadXMLDoc()</span><span style="font-size:18px"> 把 "books.xml" 载入 xmlDoc 中,并从 "</span><span style="font-size:18px">books.xml</span><span style="font-size:18px">" 中的第一个 <book> 元素返回属性节点的一个列表:</span></p><pre>xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName('book')[0].attributes;</pre><p><span style="font-size:18px">以上代码执行之后,x.length 等于属性的数量,可使用 x.getNamedItem() 返回属性节点。</span></p><p><span style="font-size:18px">下面的代码片段一个 book 的 "category" 属性的值,以及其属性的数量:</span></p><pre>xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName("book")[0].attributes; document.write(x.getNamedItem("category").nodeValue); document.write("<br />" + x.length);</pre><p><span style="font-size:18px">输出:</span></p><pre>children 1</pre><h3><span style="font-size:18px">例子解释:</span></h3><ul class=" list-paddingleft-2"><li><p><span style="font-size:18px">通过使用 </span><span style="font-size:18px">loadXMLDoc()</span><span style="font-size:18px"> 把 "</span><span style="font-size:18px">books.xml</span><span style="font-size:18px">" 载入 xmlDoc 中 </span></p></li><li><p><span style="font-size:18px">把 x 变量设置为第一个 <book> 元素的所有属性的一个列表 </span></p></li><li><p><span style="font-size:18px">从 "category" 属性输出其值 </span></p></li><li><p><span style="font-size:18px">输出属性列表的长度 </span></p></li></ul><p><span style="font-size:18px"></span> </p><h1><span style="font-size:18px">XML DOM 遍历节点树</span></h1><p><span style="font-size:18px"></span> </p><p><br></p><p><strong><span style="font-size:18px">遍历 (Traverse) 意味着在节点树中进行循环或移动。</span></strong></p><p class="example"></p><h2><span style="font-size:18px">实例</span></h2><p></p><p><span style="font-size:18px">下面的例子使用 XML 文件 </span><span style="font-size:18px">books.xml</span><span style="font-size:18px">。</span></p><p><span style="font-size:18px">函数 </span><span style="font-size:18px">loadXMLString()</span><span style="font-size:18px">,位于外部 JavaScript 中,用于加载 XML 文件。</span></p><ul class=" list-paddingleft-2"><li><p><span style="font-size:18px">遍历一棵节点树</span><span style="font-size:18px"></span></p></li><li><p><span style="font-size:18px">循环 <book> 元素的所有子节点。 </span></p></li></ul><p></p><h2><span style="font-size:18px">遍历节点树</span></h2><p></p><p><span style="font-size:18px">您经常需要循环 XML 文档,比如:当你需要提取每个元素的值时。</span></p><p><span style="font-size:18px">这个过程叫作“遍历节点树”。</span></p><p><span style="font-size:18px">下面的例子循环 <book> 的所有子节点,并显示它们的名称和值:</span></p><pre><html> <head> <script type="text/javascript" src="/Uploads/loadxmlstring.js"></script> </head> <body> <script type="text/javascript"> text="<book>"; text=text+"<title>Harry Potter</title>"; text=text+"<author>J K. Rowling</author>"; text=text+"<year>2005</year>"; text=text+"</book>"; xmlDoc=loadXMLString(text); // documentElement always represents the root node x=xmlDoc.documentElement.childNodes; for (i=0;i<x.length;i++) { document.write(x[i].nodeName); document.write(": "); document.write(x[i].childNodes[0].nodeValue); document.write("<br />"); } </script> </body> </html></pre><p><span style="font-size:18px">输出:</span></p><pre>title: Harry Potter author: J K. Rowling year: 2005</pre><h3><span style="font-size:18px">例子解释:</span></h3><ul class=" list-paddingleft-2"><li><p><span style="font-size:18px">loadXMLString()</span><span style="font-size:18px"> 把 XML 字符串载入 xmlDoc 中</span></p></li><li><p><span style="font-size:18px">获取根元素的子节点 </span></p></li><li><p><span style="font-size:18px">输出每个子节点的名称,以及文本节点的节点值 </span></p></li></ul><p><span style="font-size:18px"></span> </p><p></p><h2><span style="font-size:18px">定位 DOM 节点</span></h2><p></p><p><span style="font-size:18px">通过节点间的关系访问节点树中的节点,通常称为定位节点 ("navigating nodes")。</span></p><p><span style="font-size:18px">在 XML DOM 中,节点的关系被定义为节点的属性:</span></p><ul class=" list-paddingleft-2"><li><p><span style="font-size:18px">parentNode </span></p></li><li><p><span style="font-size:18px">childNodes </span></p></li><li><p><span style="font-size:18px">firstChild </span></p></li><li><p><span style="font-size:18px">lastChild </span></p></li><li><p><span style="font-size:18px">nextSibling </span></p></li><li><p><span style="font-size:18px">previousSibling </span></p></li></ul><p><span style="font-size:18px">下面的图像展示了 </span><span style="font-size:18px">books.xml</span><span style="font-size:18px"> 中节点树的一个部分,并说明了节点之间的关系:</span></p><p><span style="font-size:18px"><img alt="DOM node tree" src></span></p><p></p><h2><span style="max-width:90%">DOM - 父节点</span></h2><p></p><p><span style="font-size:18px">所有的节点都仅有一个父节点。下面的代码定位到 <book> 的父节点:</span></p><pre>xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName("book")[0]; document.write(x.parentNode.nodeName);</pre><h3><span style="font-size:18px">例子解释:</span></h3><ul class=" list-paddingleft-2"><li><p><span style="font-size:18px">通过使用 </span><span style="font-size:18px">loadXMLDoc()</span><span style="font-size:18px"> 把 "</span><span style="font-size:18px">books.xml</span><span style="font-size:18px">" 载入到 xmlDoc 中 </span></p></li><li><p><span style="font-size:18px">获取第一个 <book> 元素 </span></p></li><li><p><span style="font-size:18px">输出 "x" 的父节点的节点名 </span></p></li></ul><p><span style="font-size:18px">TIY</span></p><p></p><h2><span style="font-size:18px">避免空的文本节点</span></h2><p></p><p><span style="font-size:18px">Firefox,以及其他一些浏览器,把空的空白或换行当作文本节点,而 IE 不会这么做。</span></p><p><span style="font-size:18px">这会在使用下列属性使产生一个问题:firstChild、lastChild、nextSibling、previousSibling。</span></p><p><span style="font-size:18px">为了避免定位到空的文本节点(元素节点之间的空格和换行符号),我们使用一个函数来检查节点的类型:</span></p><pre>function get_nextSibling(n) { y=n.nextSibling; while (y.nodeType!=1) { y=y.nextSibling; } return y; }</pre><p><span style="font-size:18px">有了上面的函数,我们就可以使用 get_nextSibling(node) 来代替 node.nextSibling 属性。</span></p><h3><span style="font-size:18px">代码解释:</span></h3><p><br></p><p><span style="font-size:18px"></span></p><p><span style="font-size:18px">元素节点的类型是 1。如果同级节点不是元素节点,就移动到下一个节点,直到找到元素节点为止。通过这个办法,在 IE 和 Firefox 中,都可以得到相同的结果。</span></p><p></p><h2><span style="font-size:18px">获取第一个元素</span></h2><p></p><p><span style="font-size:18px">下面的代码显示第一个 <book> 的第一个元素节点:</span></p><pre><html> <head> <script type="text/javascript" src="/Uploads/loadxmldoc.js"> </script> <script type="text/javascript"> //check if the first node is an element node function get_firstChild(n) { y=n.firstChild; while (y.nodeType!=1) { y=y.nextSibling; } return y; } </script> </head> <body> <script type="text/javascript"> xmlDoc=loadXMLDoc("books.xml"); x=get_firstChild(xmlDoc.getElementsByTagName("book")[0]); document.write(x.nodeName); </script> </body> </html></pre><p><span style="font-size:18px">输出:</span></p><pre>title</pre><h3><span style="font-size:18px">例子解释:</span></h3><ul class=" list-paddingleft-2"><li><p><span style="font-size:18px">通过使用 </span><span style="font-size:18px">loadXMLDoc()</span><span style="font-size:18px"> 把 "</span><span style="font-size:18px">books.xml</span><span style="font-size:18px">" 载入 xmlDoc 中 </span></p></li><li><p><span style="font-size:18px">在第一个 <book> 上使用 get_firstChild 函数,来获取元素节点中的第一个子节点</span></p></li><li><p><span style="font-size:18px">输出第一个子节点(属于元素节点)的节点名 </span></p></li></ul><p><span style="font-size:18px"></span> </p><p><span style="font-size:18px"></span> </p><p>以上就是疯狂XML学习笔记(13)---------XML DOM的内容,更多相关内容请关注PHP中文网(www.php.cn)!</p><p><span style="font-size:18px"></span> </p><p><span style="font-size:18px"></span> </p><p><span style="font-size:18px"></span> </p> <button type="button" class="ask_text test-iframe-handle"> 没有解决问题?点击使用智能助手 </button> </div> </article> <aside class="swnetnews"> <div class="lis"> <span><i><a href="/json.html" title="json格式化" target="_blank">json格式化</a></i></span> <span><i><a href="/imgcode.html" title="代码合图片" target="_blank">代码合图片</a></i></span> <span><i>推荐内容</i></span> <ul> <li><a href="/doc/6102.html" title="win7环境下phpmyadmin的安装配置" target="_blank">win7环境下phpmyadmin的安装配置</a></li><li><a href="/doc/5053.html" title="phpmyadmin怎么操作数据表?" target="_blank">phpmyadmin怎么操作数据表?</a></li><li><a href="/doc/9668.html" title="在墨迹天气中设置透明皮肤的详细步骤" target="_blank">在墨迹天气中设置透明皮肤的详细步骤</a></li><li><a href="/doc/8336.html" title="PHP中获取SQL的查询结果的常用函数整理(实例详解)" target="_blank">PHP中获取SQL的查询结果的常用函数整理(实例详解)</a></li><li><a href="/doc/5912.html" title="浅谈PHP Closure类及其用法" target="_blank">浅谈PHP Closure类及其用法</a></li><li><a href="/doc/3957.html" title="浅析PHP中json_encode、json_decode与serialize、unserialize的性能测试" target="_blank">浅析PHP中json_encode、json_decode与serialize、unserialize的性能测试</a></li><li><a href="/doc/2964.html" title="了解PHP yield的高级用法" target="_blank">了解PHP yield的高级用法</a></li><li><a href="/doc/2558.html" title="php如何修改数组的值?" target="_blank">php如何修改数组的值?</a></li><li><a href="/doc/3114.html" title="Oracle存储过程和临时表的使用方法" target="_blank">Oracle存储过程和临时表的使用方法</a></li><li><a href="/doc/4331.html" title="讲解Python核心基础之面向对象" target="_blank">讲解Python核心基础之面向对象</a></li> </ul> </div> </aside> </main> <script> // first, find all the div.code blocks document.querySelectorAll('pre').forEach(el => { // then highlight each hljs.highlightElement(el); hljs.lineNumbersBlock(el); }); </script> <link rel="stylesheet" type="text/css" href="/kan/css/basezb.css"> <script type="text/javascript" src="/kan/js/read.js"></script> <div style="display:none"> <div class="login-box" id="login-dialog"> <div class="login-top"><a rel="nofollow" id="login1" onclick="setTab('login',1,2);" >登录</a></div> <div class="login-form" id="nav-signin"> <!-- <div class="login-ico"><a rel="nofollow" class="qq" id="qqlogin" target="_blank" href="/user-center-qqlogin.html"> QQ </a></div> --> <div class="login-box-form" id="con_login_1"> <form id="loginform" action="/user-center-login.html" method="post" onsubmit="return false;"> <p class="int-text"> <input class="email" id="username" name="username" type="text" value="用户名或Email" onfocus="if(this.value=='用户名或Email'){this.value='';}" onblur="if(this.value==''){this.value='用户名或Email';};" ></p> <p class="int-text"> <input class="password1" type="password" id="password" name="password" value="******" onBlur="if(this.value=='') this.value='******';" onFocus="if(this.value=='******') this.value='';" > </p> <p class="int-info"> <label class="ui-label"> </label> <label for="agreement" class="ui-label-checkbox"> <input type="checkbox" value="" name="cookietime" id="cookietime" checked="checked" value="2592000"> <input type="hidden" name="notforward" id="notforward" value="1"> <input type="hidden" name="dosubmit" id="dosubmit" value="1">记住我的登录 </label> <a rel="nofollow" class="aright" href="/user-center-forgetpwd.html" target="_blank"> 忘记密码? </a></p> <p class="int-btn"><a rel="nofollow" id="loginbt" class="loginbtn"><span>登录</span></a></p> </form> </div> </div> </div> </div> </div> <script type="text/javascript" src="/kan/js/foot_js.js"></script> <div id="footer"> <div class="w1200"> <p class="tips_text">本网站为非赢利性站点,本网站所有内容均来源于互联网相关站点自动搜索采集信息,相关链接已经注明来源。</p> <p class="tips_text">Copyright © 2004-2018 http://www.sxiaw.com/. All Rights Reserved.<script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?fa236be8ec7680639fbd4ee307fd0c69"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <a href="http://beian.miit.gov.cn/" target="_blank">津ICP备2023001793号-1</a></p> </div> </div> </body> </html>