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

黄舟
Lepaskan: 2017-02-21 14:51:21
asal
1683 orang telah melayarinya

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>
Salin selepas log masuk

在上面的 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><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:xml;toolbar:false;"><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><div class="contentsignin">Salin selepas log masuk</div></div><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><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:xml;toolbar:false;">xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async="false"; xmlDoc.load("books.xml");</pre><div class="contentsignin">Salin selepas log masuk</div></div><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><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:xml;toolbar:false;">xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async="false"; xmlDoc.loadXML(txt);</pre><div class="contentsignin">Salin selepas log masuk</div></div><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><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:xml;toolbar:false;">xmlDoc=document.implementation.createDocument("","",null); xmlDoc.async="false"; xmlDoc.load("books.xml");</pre><div class="contentsignin">Salin selepas log masuk</div></div><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><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:xml;toolbar:false;">parser=new DOMParser(); xmlDoc=parser.parseFromString(txt,"text/xml");</pre><div class="contentsignin">Salin selepas log masuk</div></div><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><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:xml;toolbar:false;"><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><div class="contentsignin">Salin selepas log masuk</div></div><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><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:xml;toolbar:false;"><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><div class="contentsignin">Salin selepas log masuk</div></div><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><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:xml;toolbar:false;">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><div class="contentsignin">Salin selepas log masuk</div></div><p><span style="font-size:18px">上面的函数存储在名为 "loadxmldoc.js" 的文件中。</span></p><p><span style="font-size:18px">下面的例子在其 <head> 部分有一个指向 "loadxmldoc.js" 的链接,并使用 loadXMLDoc() 函数加载 XML 文档 ("books.xml"):</span></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:xml;toolbar:false;"><html> <head><script type="text/javascript" src="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><div class="contentsignin">Salin selepas log masuk</div></div><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><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:xml;toolbar:false;">txt=xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue</pre><div class="contentsignin">Salin selepas log masuk</div></div><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><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:xml;toolbar:false;">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><div class="contentsignin">Salin selepas log masuk</div></div><p><span style="font-size:18px">输出:</span></p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:xml;toolbar:false;">Harry Potter J K. Rowling 2005</pre><div class="contentsignin">Salin selepas log masuk</div></div><div class="contentsignin">Salin selepas log masuk</div></div><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><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:xml;toolbar:false;">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><div class="contentsignin">Salin selepas log masuk</div></div><p><span style="font-size:18px">输出:</span></p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:xml;toolbar:false;">Harry Potter J K. Rowling 2005</pre><div class="contentsignin">Salin selepas log masuk</div></div><div class="contentsignin">Salin selepas log masuk</div></div><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><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:xml;toolbar:false;">node.getElementsByTagName("tagname");</pre><div class="contentsignin">Salin selepas log masuk</div></div><h3><span style="font-size:18px">实例</span></h3><p><span style="font-size:18px">下面的例子返回 x 元素下的所有 <title> 元素:</span></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:xml;toolbar:false;">x.getElementsByTagName("title");</pre><div class="contentsignin">Salin selepas log masuk</div></div><p><span style="font-size:18px">请注意,上面的例子仅返回 x 节点下的 <title> 元素。要返回 XML 文档中的所有 <title> 元素,请使用:</span></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:xml;toolbar:false;">xmlDoc.getElementsByTagName("title");</pre><div class="contentsignin">Salin selepas log masuk</div></div><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><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:xml;toolbar:false;">xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName("title");</pre><div class="contentsignin">Salin selepas log masuk</div></div><div class="contentsignin">Salin selepas log masuk</div></div><p><span style="font-size:18px">可通过下标访问 x 中的 <title> 元素。要访问第三个 <title>,您可以编写:</span></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:xml;toolbar:false;">y=x[2];</pre><div class="contentsignin">Salin selepas log masuk</div></div><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><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:xml;toolbar:false;">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><div class="contentsignin">Salin selepas log masuk</div></div><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><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:xml;toolbar:false;">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><div class="contentsignin">Salin selepas log masuk</div></div><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><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:xml;toolbar:false;">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><div class="contentsignin">Salin selepas log masuk</div></div><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><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:xml;toolbar:false;">xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName("title")[0].childNodes[0]; txt=x.nodeValue;</pre><div class="contentsignin">Salin selepas log masuk</div></div><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><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:xml;toolbar:false;">xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName("title")[0].childNodes[0]; x.nodeValue="Easy Cooking";</pre><div class="contentsignin">Salin selepas log masuk</div></div><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><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:xml;toolbar:false;">xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName("title");</pre><div class="contentsignin">Salin selepas log masuk</div></div><div class="contentsignin">Salin selepas log masuk</div></div><p><span style="font-size:18px">以上语句执行之后,x 成为一个 NodeList 对象。</span></p><p><span style="font-size:18px">下面的代码片段从节点列表 x 中的第一个 <title> 元素中返回文本:</span></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:xml;toolbar:false;">txt=x[0].childNodes[0].nodeValue;</pre><div class="contentsignin">Salin selepas log masuk</div></div><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><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:xml;toolbar:false;">xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName(&#39;title&#39;).length;</pre><div class="contentsignin">Salin selepas log masuk</div></div><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><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:xml;toolbar:false;">xmlDoc=loadXMLDoc("books.xml"); //the x variable will hold a node list x=xmlDoc.getElementsByTagName(&#39;title&#39;); for (i=0;i<x.length;i++) { document.write(x[i].childNodes[0].nodeValue); document.write("<br />"); }</pre><div class="contentsignin">Salin selepas log masuk</div></div><p><span style="font-size:18px">输出:</span></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:xml;toolbar:false;">Harry Potter Everyday Italian XQuery Kick Start Learning XML</pre><div class="contentsignin">Salin selepas log masuk</div></div><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><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:xml;toolbar:false;">xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName(&#39;book&#39;)[0].attributes;</pre><div class="contentsignin">Salin selepas log masuk</div></div><p><span style="font-size:18px">以上代码执行之后,x.length 等于属性的数量,可使用 x.getNamedItem() 返回属性节点。</span></p><p><span style="font-size:18px">下面的代码片段一个 book 的 "category" 属性的值,以及其属性的数量:</span></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:xml;toolbar:false;">xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName("book")[0].attributes; document.write(x.getNamedItem("category").nodeValue); document.write("<br />" + x.length);</pre><div class="contentsignin">Salin selepas log masuk</div></div><p><span style="font-size:18px">输出:</span></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:xml;toolbar:false;">children 1</pre><div class="contentsignin">Salin selepas log masuk</div></div><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><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:xml;toolbar:false;"><html> <head> <script type="text/javascript" src="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><div class="contentsignin">Salin selepas log masuk</div></div><p><span style="font-size:18px">输出:</span></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:xml;toolbar:false;">title: Harry Potter author: J K. Rowling year: 2005</pre><div class="contentsignin">Salin selepas log masuk</div></div><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><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:xml;toolbar:false;">xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName("book")[0]; document.write(x.parentNode.nodeName);</pre><div class="contentsignin">Salin selepas log masuk</div></div><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><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:xml;toolbar:false;">function get_nextSibling(n) { y=n.nextSibling; while (y.nodeType!=1) { y=y.nextSibling; } return y; }</pre><div class="contentsignin">Salin selepas log masuk</div></div><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><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:xml;toolbar:false;"><html> <head> <script type="text/javascript" src="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><div class="contentsignin">Salin selepas log masuk</div></div><p><span style="font-size:18px">输出:</span></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:xml;toolbar:false;">title</pre><div class="contentsignin">Salin selepas log masuk</div></div><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> </div> </div> <div style="height: 25px;"> <div class="wzconBq" style="display: inline-flex;"> <span>Label berkaitan:</span> <div class="wzcbqd"> <a onclick="hits_log(2,'www',this);" href-data="https://www.php.cn/ms/search?word=xml,学习笔记,dom" target="_blank">XML,学习笔记,DOM</a> </div> </div> <div style="display: inline-flex;float: right; color:#333333;">sumber:php.cn</div> </div> <div class="wzconOtherwz"> <a href="https://www.php.cn/ms/faq/352994.html" title="疯狂XML学习笔记(12)------------XPath"> <span>Artikel sebelumnya:疯狂XML学习笔记(12)------------XPath</span> </a> <a href="https://www.php.cn/ms/faq/353158.html" title="Java&Xml教程(一)简介"> <span>Artikel seterusnya:Java&Xml教程(一)简介</span> </a> </div> <div class="wzconShengming"> <div class="bzsmdiv">Kenyataan Laman Web ini</div> <div>Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn</div> </div> <div class="wwads-cn wwads-horizontal" data-id="156" style="max-width:955px"></div> <div class="wzconZzwz"> <div class="wzconZzwztitle">Artikel terbaru oleh pengarang</div> <ul> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="https://www.php.cn/ms/faq/377601.html">从零开始打造自己的PHP框架的视频资料</a> </div> <div>2023-03-15 16:54:01</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="https://www.php.cn/ms/faq/377137.html">PHPMailer如何利用QQ邮箱完成邮件发送功能的实例分析</a> </div> <div>2023-03-15 12:26:02</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="https://www.php.cn/ms/faq/376186.html">php中关于IMAP如何收取邮件的方法介绍</a> </div> <div>2023-03-14 18:58:01</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="https://www.php.cn/ms/faq/375194.html">php如何快速实现数组去重的实例</a> </div> <div>2023-03-14 11:30:01</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="https://www.php.cn/ms/faq/369412.html">html中关于<a>标签的全部属性的使用总结</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="https://www.php.cn/ms/faq/379971.html">php基础知识总结(新手入门必备)</a> </div> <div>2023-03-16 15:20:01</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="https://www.php.cn/ms/faq/381607.html">JavaScript中typeof的使用方法介绍</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="https://www.php.cn/ms/faq/382066.html">JavaScript中confirm()方法的使用介绍</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="https://www.php.cn/ms/faq/357705.html">HTML5 Placeholder属性的详情介绍</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="https://www.php.cn/ms/faq/380149.html">ReactJS中表单的单选多选与反选的实现方法</a> </div> <div>1970-01-01 08:00:00</div> </li> </ul> </div> <div class="wzconZzwz"> <div class="wzconZzwztitle">Isu terkini</div> <div class="wdsyContent"> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="https://www.php.cn/ms/wenda/176411.html" target="_blank" title="function_exists() tidak boleh menentukan fungsi tersuai" class="wdcdcTitle">function_exists() tidak boleh menentukan fungsi tersuai</a> <a href="https://www.php.cn/ms/wenda/176411.html" class="wdcdcCons">Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> daripada 2024-04-29 11:01:01</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>2</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>2024</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="https://www.php.cn/ms/wenda/176410.html" target="_blank" title="Bagaimana untuk memaparkan versi mudah alih Google Chrome" class="wdcdcTitle">Bagaimana untuk memaparkan versi mudah alih Google Chrome</a> <a href="https://www.php.cn/ms/wenda/176410.html" class="wdcdcCons">Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> daripada 2024-04-23 00:22:19</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>11</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>2188</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="https://www.php.cn/ms/wenda/176407.html" target="_blank" title="Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas." class="wdcdcTitle">Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas.</a> <a href="https://www.php.cn/ms/wenda/176407.html" class="wdcdcCons">Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> daripada 2024-04-19 15:37:47</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>1844</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="https://www.php.cn/ms/wenda/176406.html" target="_blank" title="Tiada output dalam tetingkap induk" class="wdcdcTitle">Tiada output dalam tetingkap induk</a> <a href="https://www.php.cn/ms/wenda/176406.html" class="wdcdcCons">document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> daripada 2024-04-18 23:52:34</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>1734</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="https://www.php.cn/ms/wenda/176405.html" target="_blank" title="Di manakah perisian kursus tentang pemetaan minda CSS?" class="wdcdcTitle">Di manakah perisian kursus tentang pemetaan minda CSS?</a> <a href="https://www.php.cn/ms/wenda/176405.html" class="wdcdcCons">Perisian kursus</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> daripada 2024-04-16 10:10:18</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>0</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>1758</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> </div> </div> <div class="wzconZt" > <div class="wzczt-title"> <div>Topik-topik yang berkaitan</div> <a href="https://www.php.cn/ms/faq/zt" target="_blank">Lagi> </a> </div> <div class="wzcttlist"> <ul> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/ms/faq/pdfzmzhcxmlgs"><img src="https://img.php.cn/upload/subject/202407/22/2024072212153267141.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Bagaimana untuk menukar pdf ke format xml" /> </a> <a target="_blank" href="https://www.php.cn/ms/faq/pdfzmzhcxmlgs" class="title-a-spanl" title="Bagaimana untuk menukar pdf ke format xml"><span>Bagaimana untuk menukar pdf ke format xml</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/ms/faq/oytxff"><img src="https://img.php.cn/upload/subject/202407/22/2024072212254113030.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Kaedah pengeluaran OuYi" /> </a> <a target="_blank" href="https://www.php.cn/ms/faq/oytxff" class="title-a-spanl" title="Kaedah pengeluaran OuYi"><span>Kaedah pengeluaran OuYi</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/ms/faq/opposjwjmml"><img src="https://img.php.cn/upload/subject/202407/22/2024072212205587111.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Bagaimana untuk membuka kunci telefon oppo jika saya terlupa kata laluan" /> </a> <a target="_blank" href="https://www.php.cn/ms/faq/opposjwjmml" class="title-a-spanl" title="Bagaimana untuk membuka kunci telefon oppo jika saya terlupa kata laluan"><span>Bagaimana untuk membuka kunci telefon oppo jika saya terlupa kata laluan</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/ms/faq/pscsazxlh"><img src="https://img.php.cn/upload/subject/202407/22/2024072214044555016.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="nombor siri pemasangan pscs5" /> </a> <a target="_blank" href="https://www.php.cn/ms/faq/pscsazxlh" class="title-a-spanl" title="nombor siri pemasangan pscs5"><span>nombor siri pemasangan pscs5</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/ms/faq/zjjdqdzy"><img src="https://img.php.cn/upload/subject/202407/22/2024072211495116276.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Fungsi geganti perantaraan" /> </a> <a target="_blank" href="https://www.php.cn/ms/faq/zjjdqdzy" class="title-a-spanl" title="Fungsi geganti perantaraan"><span>Fungsi geganti perantaraan</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/ms/faq/mysqlljbzmjj"><img src="https://img.php.cn/upload/subject/202407/22/2024072213514945291.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Bagaimana untuk menyelesaikan masalah yang pautan mysql melaporkan 10060" /> </a> <a target="_blank" href="https://www.php.cn/ms/faq/mysqlljbzmjj" class="title-a-spanl" title="Bagaimana untuk menyelesaikan masalah yang pautan mysql melaporkan 10060"><span>Bagaimana untuk menyelesaikan masalah yang pautan mysql melaporkan 10060</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/ms/faq/btczuixin"><img src="https://img.php.cn/upload/subject/202407/22/2024072213241488558.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Sebut Harga Bitcoin Terkini" /> </a> <a target="_blank" href="https://www.php.cn/ms/faq/btczuixin" class="title-a-spanl" title="Sebut Harga Bitcoin Terkini"><span>Sebut Harga Bitcoin Terkini</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/ms/faq/mongodbqdml"><img src="https://img.php.cn/upload/subject/202407/22/2024072214225448711.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="arahan permulaan mongodb" /> </a> <a target="_blank" href="https://www.php.cn/ms/faq/mongodbqdml" class="title-a-spanl" title="arahan permulaan mongodb"><span>arahan permulaan mongodb</span> </a> </li> </ul> </div> </div> </div> </div> <div class="phpwzright"> <div class="wzrOne"> <div class="wzroTitle">Cadangan popular</div> <div class="wzroList"> <ul> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="xml是什么格式的文件" href="https://www.php.cn/ms/faq/479745.html">xml是什么格式的文件</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="xml文件用什么软件打开" href="https://www.php.cn/ms/faq/423189.html">xml文件用什么软件打开</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="XML是什么,有什么作用" href="https://www.php.cn/ms/faq/417105.html">XML是什么,有什么作用</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="xml中常见的四种解析方式是什么?" href="https://www.php.cn/ms/faq/416849.html">xml中常见的四种解析方式是什么?</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="Java中解析XML的方式有哪些" href="https://www.php.cn/ms/faq/417232.html">Java中解析XML的方式有哪些</a> </div> </li> </ul> </div> </div> <script src="https://sw.php.cn/hezuo/cac1399ab368127f9b113b14eb3316d0.js" type="text/javascript"></script> <div class="wzrThree"> <div class="wzrthree-title"> <div>Tutorial Popular</div> <a target="_blank" href="https://www.php.cn/ms/course.html">Lagi> </a> </div> <div class="wzrthreelist swiper2"> <div class="wzrthreeTab swiper-wrapper"> <div class="check tabdiv swiper-slide" data-id="one">Tutorial berkaitan <div></div></div> <div class="tabdiv swiper-slide" data-id="two">Cadangan popular<div></div></div> <div class="tabdiv swiper-slide" data-id="three">Kursus terkini<div></div></div> </div> <ul class="one"> <li> <a target="_blank" href="https://www.php.cn/ms/course/812.html" title="Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)" href="https://www.php.cn/ms/course/812.html">Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)</a> <div class="wzrthreerb"> <div>1421045 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="812"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/ms/course/74.html" title="Tutorial pengenalan PHP satu: Belajar PHP dalam satu minggu" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/6253d1e28ef5c345.png" alt="Tutorial pengenalan PHP satu: Belajar PHP dalam satu minggu"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Tutorial pengenalan PHP satu: Belajar PHP dalam satu minggu" href="https://www.php.cn/ms/course/74.html">Tutorial pengenalan PHP satu: Belajar PHP dalam satu minggu</a> <div class="wzrthreerb"> <div>4264598 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="74"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/ms/course/286.html" title="Tutorial Video Permulaan JAVA" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a2bacfd9379.png" alt="Tutorial Video Permulaan JAVA"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Tutorial Video Permulaan JAVA" href="https://www.php.cn/ms/course/286.html">Tutorial Video Permulaan JAVA</a> <div class="wzrthreerb"> <div>2514005 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="286"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/ms/course/504.html" title="Pengenalan berasaskan sifar Little Turtle untuk mempelajari tutorial video Python" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a67ce3a6655.png" alt="Pengenalan berasaskan sifar Little Turtle untuk mempelajari tutorial video Python"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Pengenalan berasaskan sifar Little Turtle untuk mempelajari tutorial video Python" href="https://www.php.cn/ms/course/504.html">Pengenalan berasaskan sifar Little Turtle untuk mempelajari tutorial video Python</a> <div class="wzrthreerb"> <div>506101 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="504"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/ms/course/2.html" title="Tutorial pengenalan berasaskan sifar PHP" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/6253de27bc161468.png" alt="Tutorial pengenalan berasaskan sifar PHP"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Tutorial pengenalan berasaskan sifar PHP" href="https://www.php.cn/ms/course/2.html">Tutorial pengenalan berasaskan sifar PHP</a> <div class="wzrthreerb"> <div>861176 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="2"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> </ul> <ul class="two" style="display: none;"> <li> <a target="_blank" href="https://www.php.cn/ms/course/812.html" title="Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)" href="https://www.php.cn/ms/course/812.html">Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)</a> <div class="wzrthreerb"> <div >1421045 kali belajar</div> <div class="courseICollection" data-id="812"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/ms/course/286.html" title="Tutorial Video Permulaan JAVA" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a2bacfd9379.png" alt="Tutorial Video Permulaan JAVA"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Tutorial Video Permulaan JAVA" href="https://www.php.cn/ms/course/286.html">Tutorial Video Permulaan JAVA</a> <div class="wzrthreerb"> <div >2514005 kali belajar</div> <div class="courseICollection" data-id="286"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/ms/course/504.html" title="Pengenalan berasaskan sifar Little Turtle untuk mempelajari tutorial video Python" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a67ce3a6655.png" alt="Pengenalan berasaskan sifar Little Turtle untuk mempelajari tutorial video Python"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Pengenalan berasaskan sifar Little Turtle untuk mempelajari tutorial video Python" href="https://www.php.cn/ms/course/504.html">Pengenalan berasaskan sifar Little Turtle untuk mempelajari tutorial video Python</a> <div class="wzrthreerb"> <div >506101 kali belajar</div> <div class="courseICollection" data-id="504"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/ms/course/901.html" title="Pengenalan pantas kepada pembangunan bahagian hadapan web" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/64be28a53a4f6310.png" alt="Pengenalan pantas kepada pembangunan bahagian hadapan web"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Pengenalan pantas kepada pembangunan bahagian hadapan web" href="https://www.php.cn/ms/course/901.html">Pengenalan pantas kepada pembangunan bahagian hadapan web</a> <div class="wzrthreerb"> <div >215595 kali belajar</div> <div class="courseICollection" data-id="901"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/ms/course/234.html" title="Kuasai tutorial video PS dari awal" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62611f57ed0d4840.jpg" alt="Kuasai tutorial video PS dari awal"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Kuasai tutorial video PS dari awal" href="https://www.php.cn/ms/course/234.html">Kuasai tutorial video PS dari awal</a> <div class="wzrthreerb"> <div >885690 kali belajar</div> <div class="courseICollection" data-id="234"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> </ul> <ul class="three" style="display: none;"> <li> <a target="_blank" href="https://www.php.cn/ms/course/1648.html" title="[Web front-end] Permulaan pantas Node.js" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png" alt="[Web front-end] Permulaan pantas Node.js"/> </a> <div class="wzrthree-right"> <a target="_blank" title="[Web front-end] Permulaan pantas Node.js" href="https://www.php.cn/ms/course/1648.html">[Web front-end] Permulaan pantas Node.js</a> <div class="wzrthreerb"> <div >7165 kali belajar</div> <div class="courseICollection" data-id="1648"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/ms/course/1647.html" title="Koleksi lengkap kursus timbunan penuh pembangunan web asing" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/6628cc96e310c937.png" alt="Koleksi lengkap kursus timbunan penuh pembangunan web asing"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Koleksi lengkap kursus timbunan penuh pembangunan web asing" href="https://www.php.cn/ms/course/1647.html">Koleksi lengkap kursus timbunan penuh pembangunan web asing</a> <div class="wzrthreerb"> <div >5561 kali belajar</div> <div class="courseICollection" data-id="1647"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/ms/course/1646.html" title="Gunakan GraphQL praktikal bahasa" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/662221173504a436.png" alt="Gunakan GraphQL praktikal bahasa"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Gunakan GraphQL praktikal bahasa" href="https://www.php.cn/ms/course/1646.html">Gunakan GraphQL praktikal bahasa</a> <div class="wzrthreerb"> <div >4684 kali belajar</div> <div class="courseICollection" data-id="1646"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/ms/course/1645.html" title="Master kipas 550W mempelajari JavaScript dari awal langkah demi langkah" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/662077e163124646.png" alt="Master kipas 550W mempelajari JavaScript dari awal langkah demi langkah"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Master kipas 550W mempelajari JavaScript dari awal langkah demi langkah" href="https://www.php.cn/ms/course/1645.html">Master kipas 550W mempelajari JavaScript dari awal langkah demi langkah</a> <div class="wzrthreerb"> <div >670 kali belajar</div> <div class="courseICollection" data-id="1645"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/ms/course/1644.html" title="Sarjana Python Mosh, seorang pemula dengan pengetahuan asas sifar boleh bermula dalam masa 6 jam" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/6616418ca80b8916.png" alt="Sarjana Python Mosh, seorang pemula dengan pengetahuan asas sifar boleh bermula dalam masa 6 jam"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Sarjana Python Mosh, seorang pemula dengan pengetahuan asas sifar boleh bermula dalam masa 6 jam" href="https://www.php.cn/ms/course/1644.html">Sarjana Python Mosh, seorang pemula dengan pengetahuan asas sifar boleh bermula dalam masa 6 jam</a> <div class="wzrthreerb"> <div >23682 kali belajar</div> <div class="courseICollection" data-id="1644"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> </ul> </div> <script> var mySwiper = new Swiper('.swiper2', { autoplay: false,//可选选项,自动滑动 slidesPerView : 'auto', }) $('.wzrthreeTab>div').click(function(e){ $('.wzrthreeTab>div').removeClass('check') $(this).addClass('check') $('.wzrthreelist>ul').css('display','none') $('.'+e.currentTarget.dataset.id).show() }) </script> </div> <div class="wzrFour"> <div class="wzrfour-title"> <div>Muat turun terkini</div> <a href="https://www.php.cn/ms/xiazai">Lagi> </a> </div> <script> $(document).ready(function(){ var sjyx_banSwiper = new Swiper(".sjyx_banSwiperwz",{ speed:1000, autoplay:{ delay:3500, disableOnInteraction: false, }, pagination:{ el:'.sjyx_banSwiperwz .swiper-pagination', clickable :false, }, loop:true }) }) </script> <div class="wzrfourList swiper3"> <div class="wzrfourlTab swiper-wrapper"> <div class="check swiper-slide" data-id="onef">kesan web <div></div></div> <div class="swiper-slide" data-id="twof">Kod sumber laman web<div></div></div> <div class="swiper-slide" data-id="threef">Bahan laman web<div></div></div> <div class="swiper-slide" data-id="fourf">Templat hujung hadapan<div></div></div> </div> <ul class="onef"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="kod hubungan borang mesej perusahaan jQuery" href="https://www.php.cn/ms/toolset/js-special-effects/8071">[butang borang] kod hubungan borang mesej perusahaan jQuery</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="Kesan main balik kotak muzik MP3 HTML5" href="https://www.php.cn/ms/toolset/js-special-effects/8070">[Kesan khas pemain] Kesan main balik kotak muzik MP3 HTML5</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="HTML5 kesan khas menu navigasi animasi zarah sejuk" href="https://www.php.cn/ms/toolset/js-special-effects/8069">[Navigasi menu] HTML5 kesan khas menu navigasi animasi zarah sejuk</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="jQuery bentuk visual seret dan lepas kod penyuntingan" href="https://www.php.cn/ms/toolset/js-special-effects/8068">[butang borang] jQuery bentuk visual seret dan lepas kod penyuntingan</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="Kod pemain muzik Kugou tiruan VUE.JS" href="https://www.php.cn/ms/toolset/js-special-effects/8067">[Kesan khas pemain] Kod pemain muzik Kugou tiruan VUE.JS</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="Permainan kotak menolak html5 klasik" href="https://www.php.cn/ms/toolset/js-special-effects/8066">[kesan khas html5] Permainan kotak menolak html5 klasik</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="menatal jQuery untuk menambah atau mengurangkan kesan imej" href="https://www.php.cn/ms/toolset/js-special-effects/8065">[Gambar kesan khas] menatal jQuery untuk menambah atau mengurangkan kesan imej</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="Kesan zum hover kulit album peribadi CSS3" href="https://www.php.cn/ms/toolset/js-special-effects/8064">[Kesan album foto] Kesan zum hover kulit album peribadi CSS3</a> </div> </li> </ul> <ul class="twof" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ms/toolset/website-source-code/8328" title="Templat Laman Web Syarikat Pembersihan dan Pembaikan Hiasan Rumah" target="_blank">[Templat bahagian hadapan] Templat Laman Web Syarikat Pembersihan dan Pembaikan Hiasan Rumah</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ms/toolset/website-source-code/8327" title="Templat halaman panduan resume peribadi berwarna segar" target="_blank">[Templat bahagian hadapan] Templat halaman panduan resume peribadi berwarna segar</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ms/toolset/website-source-code/8326" title="Templat Web Resume Kerja Kreatif Pereka" target="_blank">[Templat bahagian hadapan] Templat Web Resume Kerja Kreatif Pereka</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ms/toolset/website-source-code/8325" title="Templat laman web syarikat pembinaan kejuruteraan moden" target="_blank">[Templat bahagian hadapan] Templat laman web syarikat pembinaan kejuruteraan moden</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ms/toolset/website-source-code/8324" title="Templat HTML5 responsif untuk institusi perkhidmatan pendidikan" target="_blank">[Templat bahagian hadapan] Templat HTML5 responsif untuk institusi perkhidmatan pendidikan</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ms/toolset/website-source-code/8323" title="Templat laman web pusat membeli-belah kedai e-buku dalam talian" target="_blank">[Templat bahagian hadapan] Templat laman web pusat membeli-belah kedai e-buku dalam talian</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ms/toolset/website-source-code/8322" title="Teknologi IT menyelesaikan templat tapak web syarikat Internet" target="_blank">[Templat bahagian hadapan] Teknologi IT menyelesaikan templat tapak web syarikat Internet</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ms/toolset/website-source-code/8321" title="Templat laman web perkhidmatan perdagangan pertukaran asing gaya ungu" target="_blank">[Templat bahagian hadapan] Templat laman web perkhidmatan perdagangan pertukaran asing gaya ungu</a> </div> </li> </ul> <ul class="threef" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ms/toolset/website-materials/3078" target="_blank" title="Bahan vektor elemen musim panas yang comel (EPS+PNG)">[bahan PNG] Bahan vektor elemen musim panas yang comel (EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ms/toolset/website-materials/3077" target="_blank" title="Empat bahan vektor lencana tamat pengajian 2023 merah (AI+EPS+PNG)">[bahan PNG] Empat bahan vektor lencana tamat pengajian 2023 merah (AI+EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ms/toolset/website-materials/3076" target="_blank" title="Burung nyanyian dan troli diisi dengan bahan vektor sepanduk musim bunga reka bentuk bunga (AI+EPS)">[gambar sepanduk] Burung nyanyian dan troli diisi dengan bahan vektor sepanduk musim bunga reka bentuk bunga (AI+EPS)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ms/toolset/website-materials/3075" target="_blank" title="Bahan vektor topi pengijazahan emas (EPS+PNG)">[bahan PNG] Bahan vektor topi pengijazahan emas (EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ms/toolset/website-materials/3074" target="_blank" title="Bahan vektor ikon gunung gaya hitam putih (EPS+PNG)">[bahan PNG] Bahan vektor ikon gunung gaya hitam putih (EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ms/toolset/website-materials/3073" target="_blank" title="Bahan vektor siluet superhero (EPS+PNG) dengan jubah warna yang berbeza dan pose yang berbeza">[bahan PNG] Bahan vektor siluet superhero (EPS+PNG) dengan jubah warna yang berbeza dan pose yang berbeza</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ms/toolset/website-materials/3072" target="_blank" title="Bahan vektor sepanduk Hari Arbor gaya rata (AI+EPS)">[gambar sepanduk] Bahan vektor sepanduk Hari Arbor gaya rata (AI+EPS)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ms/toolset/website-materials/3071" target="_blank" title="Sembilan bahan vektor buih sembang meletup gaya komik (EPS+PNG)">[bahan PNG] Sembilan bahan vektor buih sembang meletup gaya komik (EPS+PNG)</a> </div> </li> </ul> <ul class="fourf" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ms/toolset/website-source-code/8328" target="_blank" title="Templat Laman Web Syarikat Pembersihan dan Pembaikan Hiasan Rumah">[Templat bahagian hadapan] Templat Laman Web Syarikat Pembersihan dan Pembaikan Hiasan Rumah</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ms/toolset/website-source-code/8327" target="_blank" title="Templat halaman panduan resume peribadi berwarna segar">[Templat bahagian hadapan] Templat halaman panduan resume peribadi berwarna segar</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ms/toolset/website-source-code/8326" target="_blank" title="Templat Web Resume Kerja Kreatif Pereka">[Templat bahagian hadapan] Templat Web Resume Kerja Kreatif Pereka</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ms/toolset/website-source-code/8325" target="_blank" title="Templat laman web syarikat pembinaan kejuruteraan moden">[Templat bahagian hadapan] Templat laman web syarikat pembinaan kejuruteraan moden</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ms/toolset/website-source-code/8324" target="_blank" title="Templat HTML5 responsif untuk institusi perkhidmatan pendidikan">[Templat bahagian hadapan] Templat HTML5 responsif untuk institusi perkhidmatan pendidikan</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ms/toolset/website-source-code/8323" target="_blank" title="Templat laman web pusat membeli-belah kedai e-buku dalam talian">[Templat bahagian hadapan] Templat laman web pusat membeli-belah kedai e-buku dalam talian</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ms/toolset/website-source-code/8322" target="_blank" title="Teknologi IT menyelesaikan templat tapak web syarikat Internet">[Templat bahagian hadapan] Teknologi IT menyelesaikan templat tapak web syarikat Internet</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ms/toolset/website-source-code/8321" target="_blank" title="Templat laman web perkhidmatan perdagangan pertukaran asing gaya ungu">[Templat bahagian hadapan] Templat laman web perkhidmatan perdagangan pertukaran asing gaya ungu</a> </div> </li> </ul> </div> <script> var mySwiper = new Swiper('.swiper3', { autoplay: false,//可选选项,自动滑动 slidesPerView : 'auto', }) $('.wzrfourlTab>div').click(function(e){ $('.wzrfourlTab>div').removeClass('check') $(this).addClass('check') $('.wzrfourList>ul').css('display','none') $('.'+e.currentTarget.dataset.id).show() }) </script> </div> </div> </div> <footer> <div class="footer"> <div class="footertop"> <img src="/static/imghw/logo.png" alt=""> <p>Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!</p> </div> <div class="footermid"> <a href="https://www.php.cn/ms/about/us.html">Tentang kita</a> <a href="https://www.php.cn/ms/about/disclaimer.html">Penafian</a> <a href="https://www.php.cn/ms/update/article_0_1.html">Sitemap</a> </div> <div class="footerbottom"> <p> © php.cn All rights reserved </p> </div> </div> </footer> <input type="hidden" id="verifycode" value="/captcha.html"> <script>layui.use(['element', 'carousel'], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false});});});</script> <script src="/static/js/common_new.js"></script> <script type="text/javascript" src="/static/js/jquery.cookie.js?1732724752"></script> <script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script> <link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all'/> <script type='text/javascript' src='/static/js/viewer.min.js?1'></script> <script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script> <script type="text/javascript" src="/static/js/global.min.js?5.5.53"></script> </body> </html>