Heim > Backend-Entwicklung > XML/RSS-Tutorial > Verrückte XML-Studiennotizen (13) --------- XML ​​DOM

Verrückte XML-Studiennotizen (13) --------- XML ​​DOM

黄舟
Freigeben: 2017-02-21 14:51:21
Original
1704 Leute haben es durchsucht

Das XML Document Object Model definiert Standardmethoden für den Zugriff auf und die Bearbeitung von XML-Dokumenten.

DOM behandelt ein XML-Dokument als Baumstruktur, wobei die Blätter als Knoten definiert sind.

Was ist XML-DOM?

XML-DOM ist:

  • Standardobjektmodell für XML

  • Standardprogrammierschnittstelle für XML

  • Plattform- und sprachneutral

  • W3C-Standards

XML DOM definiert die Objekte und Attribute aller XML-Elemente sowie die Methoden (Schnittstellen) für den Zugriff darauf.

Mit anderen Worten:

XML DOM ist ein Standard zum Abrufen, Ändern, Hinzufügen oder Entfernen von XML-Elementen.

XML-DOM-Knoten


Jede Komponente in einem XML-Dokument ist ein Knoten.

Knoten

Jede Komponente im XML-Dokument gemäß dem DOM Sie sind alle ein Knoten.

DOM ist wie folgt festgelegt:

  • Das gesamte Dokument ist ein Dokumentknoten

  • Jedes XML-Tag ist ein Elementknoten

  • Der im XML-Element enthaltene Text ist ein Textknoten

  • Jedes XML-Attribut ist ein Attributknoten

  • Anmerkungen gehören zu Kommentarknoten

DOM-Instanz

Bitte beachten Sie die folgende XML-Datei (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>
Nach dem Login kopieren

Im obigen XML ist der Stammknoten . Alle anderen Knoten im Dokument sind im enthalten.

Der Wurzelknoten

Der erste -Knoten hat vier Knoten: , , , von denen jeder einen Textknoten enthält , „Harry Potter“, „J K. Rowling“, „2005“ und „29,99“.

Text wird immer in Textknoten gespeichert

Eine gemeinsame Funktion bei der DOM-Verarbeitung Der Fehler besteht darin, dass angenommen wird, dass der Elementknoten Text enthält.

Der Text des Elementknotens wird jedoch im Textknoten gespeichert.

In diesem Beispiel: 2005, der Elementknoten , hat einen Textknoten mit dem Wert „2005“ .

"2005" ist nicht der Wert des -Elements!

XML-DOM-Knotenbaum


XML DOM Behandeln Sie das XML-DOM-Dokument als Knotenbaum.

Alle Knoten im Baum haben Beziehungen zueinander.

XML-DOM-Knotenbaum

XML-DOM Behandelt ein XML-Dokument als Eine Baumstruktur. Diese Baumstruktur wird als Knotenbaum bezeichnet.

Auf alle Knoten kann über diesen Baum zugegriffen werden. Ihr Inhalt kann geändert oder gelöscht werden und es können neue Elemente erstellt werden.

Dieser Knotenbaum zeigt eine Sammlung von Knoten und die Verbindungen zwischen ihnen. Der Baum beginnt am Wurzelknoten und verzweigt sich zu den Textknoten auf der untersten Ebene des Baums:

DOM node tree

oben Das Bild stellt die XML-Datei books.xml dar.

Übergeordnete, untergeordnete und Geschwisterknoten

Knoten im Knotenbaum sind mit verbunden einander Es besteht eine hierarchische Beziehung zwischen ihnen.

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

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

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

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

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

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

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

node tree

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

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

注释:父节点:Parent Node,子节点:Children Node,同级节点:Sibling Node。

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

请看下面的 XML 片段:

<bookstore>
  <book category="CHILDREN">
    <title lang="en">Harry Potter</title> 
    <author>J K. Rowling</author> 
    <year>2005</year> 
    <price>29.99</price> 
  </book>
</bookstore>
Nach dem Login kopieren

在上面的 XML 中, 元素是 <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">Nach dem Login kopieren</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">Nach dem Login kopieren</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">Nach dem Login kopieren</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">Nach dem Login kopieren</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">Nach dem Login kopieren</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">Nach dem Login kopieren</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">Nach dem Login kopieren</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">Nach dem Login kopieren</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">Nach dem Login kopieren</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">Nach dem Login kopieren</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">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</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">Nach dem Login kopieren</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">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</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">Nach dem Login kopieren</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">Nach dem Login kopieren</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">Nach dem Login kopieren</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">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</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">Nach dem Login kopieren</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">Nach dem Login kopieren</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">Nach dem Login kopieren</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">Nach dem Login kopieren</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">Nach dem Login kopieren</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">Nach dem Login kopieren</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">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</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">Nach dem Login kopieren</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">Nach dem Login kopieren</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">Nach dem Login kopieren</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">Nach dem Login kopieren</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">Nach dem Login kopieren</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">Nach dem Login kopieren</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">Nach dem Login kopieren</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">Nach dem Login kopieren</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">Nach dem Login kopieren</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">Nach dem Login kopieren</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">Nach dem Login kopieren</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">Nach dem Login kopieren</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">Nach dem Login kopieren</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>Verwandte Etiketten:</span> <div class="wzcbqd"> <a onclick="hits_log(2,'www',this);" href-data="https://www.php.cn/de/search?word=xml,学习笔记,dom" target="_blank">XML,学习笔记,DOM</a> </div> </div> <div style="display: inline-flex;float: right; color:#333333;">Quelle:php.cn</div> </div> <div class="wzconOtherwz"> <a href="https://www.php.cn/de/faq/352994.html" title="Verrückte XML-Studiennotizen (12)------------XPath"> <span>Vorheriger Artikel:Verrückte XML-Studiennotizen (12)------------XPath</span> </a> <a href="https://www.php.cn/de/faq/353158.html" title="Einführung in das Java- und XML-Tutorial (1)"> <span>Nächster Artikel:Einführung in das Java- und XML-Tutorial (1)</span> </a> </div> <div class="wzconShengming"> <div class="bzsmdiv">Erklärung dieser Website</div> <div>Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn</div> </div> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="2507867629"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div class="wzconZzwz"> <div class="wzconZzwztitle">Neueste Artikel des Autors</div> <ul> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="https://www.php.cn/de/faq/377601.html">Videomaterial zum Aufbau Ihres eigenen PHP-Frameworks von Grund auf</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/de/faq/377137.html">Beispielanalyse, wie PHPMailer das QQ-Postfach verwendet, um die E-Mail-Versandfunktion abzuschließen</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/de/faq/376186.html">Einführung in den Empfang von E-Mails in IMAP in PHP</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/de/faq/375194.html">Beispiel für die schnelle Implementierung der Array-Deduplizierung in 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/de/faq/369412.html">Zusammenfassung der Verwendung aller Attribute des <a>-Tags in HTML</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/de/faq/379971.html">Zusammenfassung der PHP-Grundkenntnisse (notwendig für Anfänger zum Einstieg)</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/de/faq/381607.html">Einführung in die Verwendung von typeof in JavaScript</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/de/faq/382066.html">Einführung in die Verwendung der Bestätigungsmethode () in JavaScript</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/de/faq/357705.html">Eine detaillierte Einführung in das HTML5-Platzhalterattribut</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/de/faq/380149.html">So implementieren Sie Einzelauswahl, Mehrfachauswahl und Rückwärtsauswahl in Formularen in ReactJS</a> </div> <div>1970-01-01 08:00:00</div> </li> </ul> </div> <div class="wzconZzwz"> <div class="wzconZzwztitle">Aktuelle Ausgaben</div> <div class="wdsyContent"> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="https://www.php.cn/de/wenda/176411.html" target="_blank" title="function_exists() kann die benutzerdefinierte Funktion nicht ermitteln" class="wdcdcTitle">function_exists() kann die benutzerdefinierte Funktion nicht ermitteln</a> <a href="https://www.php.cn/de/wenda/176411.html" class="wdcdcCons">Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> Aus 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>3</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>2324</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/de/wenda/176410.html" target="_blank" title="So zeigen Sie die mobile Version von Google Chrome an" class="wdcdcTitle">So zeigen Sie die mobile Version von Google Chrome an</a> <a href="https://www.php.cn/de/wenda/176410.html" class="wdcdcCons">Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> Aus 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>2457</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/de/wenda/176407.html" target="_blank" title="Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht." class="wdcdcTitle">Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht.</a> <a href="https://www.php.cn/de/wenda/176407.html" class="wdcdcCons">Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> Aus 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>2074</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/de/wenda/176406.html" target="_blank" title="Im übergeordneten Fenster erfolgt keine Ausgabe" class="wdcdcTitle">Im übergeordneten Fenster erfolgt keine Ausgabe</a> <a href="https://www.php.cn/de/wenda/176406.html" class="wdcdcCons">document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> Aus 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>1958</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/de/wenda/176405.html" target="_blank" title="Wo gibt es die Kursunterlagen zum CSS-Mindmapping?" class="wdcdcTitle">Wo gibt es die Kursunterlagen zum CSS-Mindmapping?</a> <a href="https://www.php.cn/de/wenda/176405.html" class="wdcdcCons">Kursunterlagen</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> Aus 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>2027</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> </div> </div> <div class="wzconZt" > <div class="wzczt-title"> <div>verwandte Themen</div> <a href="https://www.php.cn/de/faq/zt" target="_blank">Mehr> </a> </div> <div class="wzcttlist"> <ul> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/de/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="So konvertieren Sie PDF in das XML-Format" /> </a> <a target="_blank" href="https://www.php.cn/de/faq/pdfzmzhcxmlgs" class="title-a-spanl" title="So konvertieren Sie PDF in das XML-Format"><span>So konvertieren Sie PDF in das XML-Format</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/de/faq/dnkbljdwdyy"><img src="https://img.php.cn/upload/subject/202407/22/2024072212330842429.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Fünf Gründe, warum sich Ihr Computer nicht einschalten lässt" /> </a> <a target="_blank" href="https://www.php.cn/de/faq/dnkbljdwdyy" class="title-a-spanl" title="Fünf Gründe, warum sich Ihr Computer nicht einschalten lässt"><span>Fünf Gründe, warum sich Ihr Computer nicht einschalten lässt</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/de/faq/dqymdjbfscwzm"><img src="https://img.php.cn/upload/subject/202407/22/2024072213292993602.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="So beheben Sie einen Fehler im Skript der aktuellen Seite" /> </a> <a target="_blank" href="https://www.php.cn/de/faq/dqymdjbfscwzm" class="title-a-spanl" title="So beheben Sie einen Fehler im Skript der aktuellen Seite"><span>So beheben Sie einen Fehler im Skript der aktuellen Seite</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/de/faq/fenbianlv"><img src="https://img.php.cn/upload/subject/202407/22/2024072214154912564.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Welche Auflösung ist 1080p?" /> </a> <a target="_blank" href="https://www.php.cn/de/faq/fenbianlv" class="title-a-spanl" title="Welche Auflösung ist 1080p?"><span>Welche Auflösung ist 1080p?</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/de/faq/titlesmys"><img src="https://img.php.cn/upload/subject/202407/22/2024072214245811179.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Was bedeutet Titel?" /> </a> <a target="_blank" href="https://www.php.cn/de/faq/titlesmys" class="title-a-spanl" title="Was bedeutet Titel?"><span>Was bedeutet Titel?</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/de/faq/hm30ysmxgn"><img src="https://img.php.cn/upload/subject/202407/22/2024072214313381023.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Was sind die neuen Funktionen von Hongmeng 3.0?" /> </a> <a target="_blank" href="https://www.php.cn/de/faq/hm30ysmxgn" class="title-a-spanl" title="Was sind die neuen Funktionen von Hongmeng 3.0?"><span>Was sind die neuen Funktionen von Hongmeng 3.0?</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/de/faq/emulelj"><img src="https://img.php.cn/upload/subject/202407/22/2024072214424156108.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Emule-Server-Link" /> </a> <a target="_blank" href="https://www.php.cn/de/faq/emulelj" class="title-a-spanl" title="Emule-Server-Link"><span>Emule-Server-Link</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/de/faq/oracletjcfqff"><img src="https://img.php.cn/upload/subject/202407/22/2024072213373293521.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Oracle fügt Trigger-Methode hinzu" /> </a> <a target="_blank" href="https://www.php.cn/de/faq/oracletjcfqff" class="title-a-spanl" title="Oracle fügt Trigger-Methode hinzu"><span>Oracle fügt Trigger-Methode hinzu</span> </a> </li> </ul> </div> </div> </div> </div> <div class="phpwzright"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5902227090019525" data-ad-slot="3653428331" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div class="wzrOne"> <div class="wzroTitle">Beliebte Empfehlungen</div> <div class="wzroList"> <ul> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="Welches Format ist XML?" href="https://www.php.cn/de/faq/479745.html">Welches Format ist XML?</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="Mit welcher Software öffnen Sie XML-Dateien?" href="https://www.php.cn/de/faq/423189.html">Mit welcher Software öffnen Sie XML-Dateien?</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="Was ist XML und was macht es?" href="https://www.php.cn/de/faq/417105.html">Was ist XML und was macht es?</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="Was sind die vier gängigen Analysemethoden in XML?" href="https://www.php.cn/de/faq/416849.html">Was sind die vier gängigen Analysemethoden in XML?</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="Welche Möglichkeiten gibt es, XML in Java zu analysieren?" href="https://www.php.cn/de/faq/417232.html">Welche Möglichkeiten gibt es, XML in Java zu analysieren?</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>Beliebte Tutorials</div> <a target="_blank" href="https://www.php.cn/de/course.html">Mehr> </a> </div> <div class="wzrthreelist swiper2"> <div class="wzrthreeTab swiper-wrapper"> <div class="check tabdiv swiper-slide" data-id="one">Verwandte Tutorials <div></div></div> <div class="tabdiv swiper-slide" data-id="two">Beliebte Empfehlungen<div></div></div> <div class="tabdiv swiper-slide" data-id="three">Aktuelle Kurse<div></div></div> </div> <ul class="one"> <li> <a target="_blank" href="https://www.php.cn/de/course/812.html" title="Das neueste Video-Tutorial zur Weltpremiere von ThinkPHP 5.1 (60 Tage zum Online-Schulungskurs zum PHP-Experten)" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="Das neueste Video-Tutorial zur Weltpremiere von ThinkPHP 5.1 (60 Tage zum Online-Schulungskurs zum PHP-Experten)"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Das neueste Video-Tutorial zur Weltpremiere von ThinkPHP 5.1 (60 Tage zum Online-Schulungskurs zum PHP-Experten)" href="https://www.php.cn/de/course/812.html">Das neueste Video-Tutorial zur Weltpremiere von ThinkPHP 5.1 (60 Tage zum Online-Schulungskurs zum PHP-Experten)</a> <div class="wzrthreerb"> <div>1425111 <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/de/course/74.html" title="PHP-Einführungs-Tutorial eins: Lernen Sie PHP in einer Woche" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/6253d1e28ef5c345.png" alt="PHP-Einführungs-Tutorial eins: Lernen Sie PHP in einer Woche"/> </a> <div class="wzrthree-right"> <a target="_blank" title="PHP-Einführungs-Tutorial eins: Lernen Sie PHP in einer Woche" href="https://www.php.cn/de/course/74.html">PHP-Einführungs-Tutorial eins: Lernen Sie PHP in einer Woche</a> <div class="wzrthreerb"> <div>4271635 <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/de/course/286.html" title="JAVA-Video-Tutorial für Anfänger" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a2bacfd9379.png" alt="JAVA-Video-Tutorial für Anfänger"/> </a> <div class="wzrthree-right"> <a target="_blank" title="JAVA-Video-Tutorial für Anfänger" href="https://www.php.cn/de/course/286.html">JAVA-Video-Tutorial für Anfänger</a> <div class="wzrthreerb"> <div>2552709 <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/de/course/504.html" title="Das nullbasierte Einführungsvideo-Tutorial von Little Turtle zum Erlernen von Python" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a67ce3a6655.png" alt="Das nullbasierte Einführungsvideo-Tutorial von Little Turtle zum Erlernen von Python"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Das nullbasierte Einführungsvideo-Tutorial von Little Turtle zum Erlernen von Python" href="https://www.php.cn/de/course/504.html">Das nullbasierte Einführungsvideo-Tutorial von Little Turtle zum Erlernen von Python</a> <div class="wzrthreerb"> <div>508557 <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/de/course/2.html" title="PHP Zero-basiertes Einführungs-Tutorial" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/6253de27bc161468.png" alt="PHP Zero-basiertes Einführungs-Tutorial"/> </a> <div class="wzrthree-right"> <a target="_blank" title="PHP Zero-basiertes Einführungs-Tutorial" href="https://www.php.cn/de/course/2.html">PHP Zero-basiertes Einführungs-Tutorial</a> <div class="wzrthreerb"> <div>864264 <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/de/course/812.html" title="Das neueste Video-Tutorial zur Weltpremiere von ThinkPHP 5.1 (60 Tage zum Online-Schulungskurs zum PHP-Experten)" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="Das neueste Video-Tutorial zur Weltpremiere von ThinkPHP 5.1 (60 Tage zum Online-Schulungskurs zum PHP-Experten)"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Das neueste Video-Tutorial zur Weltpremiere von ThinkPHP 5.1 (60 Tage zum Online-Schulungskurs zum PHP-Experten)" href="https://www.php.cn/de/course/812.html">Das neueste Video-Tutorial zur Weltpremiere von ThinkPHP 5.1 (60 Tage zum Online-Schulungskurs zum PHP-Experten)</a> <div class="wzrthreerb"> <div >1425111 Lernzeiten</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/de/course/286.html" title="JAVA-Video-Tutorial für Anfänger" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a2bacfd9379.png" alt="JAVA-Video-Tutorial für Anfänger"/> </a> <div class="wzrthree-right"> <a target="_blank" title="JAVA-Video-Tutorial für Anfänger" href="https://www.php.cn/de/course/286.html">JAVA-Video-Tutorial für Anfänger</a> <div class="wzrthreerb"> <div >2552709 Lernzeiten</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/de/course/504.html" title="Das nullbasierte Einführungsvideo-Tutorial von Little Turtle zum Erlernen von Python" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a67ce3a6655.png" alt="Das nullbasierte Einführungsvideo-Tutorial von Little Turtle zum Erlernen von Python"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Das nullbasierte Einführungsvideo-Tutorial von Little Turtle zum Erlernen von Python" href="https://www.php.cn/de/course/504.html">Das nullbasierte Einführungsvideo-Tutorial von Little Turtle zum Erlernen von Python</a> <div class="wzrthreerb"> <div >508557 Lernzeiten</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/de/course/901.html" title="Kurze Einführung in die Web-Frontend-Entwicklung" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/64be28a53a4f6310.png" alt="Kurze Einführung in die Web-Frontend-Entwicklung"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Kurze Einführung in die Web-Frontend-Entwicklung" href="https://www.php.cn/de/course/901.html">Kurze Einführung in die Web-Frontend-Entwicklung</a> <div class="wzrthreerb"> <div >216051 Lernzeiten</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/de/course/234.html" title="Meistern Sie PS-Video-Tutorials von Grund auf" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62611f57ed0d4840.jpg" alt="Meistern Sie PS-Video-Tutorials von Grund auf"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Meistern Sie PS-Video-Tutorials von Grund auf" href="https://www.php.cn/de/course/234.html">Meistern Sie PS-Video-Tutorials von Grund auf</a> <div class="wzrthreerb"> <div >893920 Lernzeiten</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/de/course/1648.html" title="[Web-Frontend] Node.js-Schnellstart" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png" alt="[Web-Frontend] Node.js-Schnellstart"/> </a> <div class="wzrthree-right"> <a target="_blank" title="[Web-Frontend] Node.js-Schnellstart" href="https://www.php.cn/de/course/1648.html">[Web-Frontend] Node.js-Schnellstart</a> <div class="wzrthreerb"> <div >7792 Lernzeiten</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/de/course/1647.html" title="Vollständige Sammlung ausländischer Full-Stack-Kurse zur Webentwicklung" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/6628cc96e310c937.png" alt="Vollständige Sammlung ausländischer Full-Stack-Kurse zur Webentwicklung"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Vollständige Sammlung ausländischer Full-Stack-Kurse zur Webentwicklung" href="https://www.php.cn/de/course/1647.html">Vollständige Sammlung ausländischer Full-Stack-Kurse zur Webentwicklung</a> <div class="wzrthreerb"> <div >6236 Lernzeiten</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/de/course/1646.html" title="Gehen Sie zur praktischen Anwendung von GraphQL" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/662221173504a436.png" alt="Gehen Sie zur praktischen Anwendung von GraphQL"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Gehen Sie zur praktischen Anwendung von GraphQL" href="https://www.php.cn/de/course/1646.html">Gehen Sie zur praktischen Anwendung von GraphQL</a> <div class="wzrthreerb"> <div >5126 Lernzeiten</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/de/course/1645.html" title="Der 550-W-Lüftermeister lernt Schritt für Schritt JavaScript von Grund auf" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/662077e163124646.png" alt="Der 550-W-Lüftermeister lernt Schritt für Schritt JavaScript von Grund auf"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Der 550-W-Lüftermeister lernt Schritt für Schritt JavaScript von Grund auf" href="https://www.php.cn/de/course/1645.html">Der 550-W-Lüftermeister lernt Schritt für Schritt JavaScript von Grund auf</a> <div class="wzrthreerb"> <div >714 Lernzeiten</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/de/course/1644.html" title="Python-Meister Mosh, ein Anfänger ohne Grundkenntnisse, kann in 6 Stunden loslegen" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/6616418ca80b8916.png" alt="Python-Meister Mosh, ein Anfänger ohne Grundkenntnisse, kann in 6 Stunden loslegen"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Python-Meister Mosh, ein Anfänger ohne Grundkenntnisse, kann in 6 Stunden loslegen" href="https://www.php.cn/de/course/1644.html">Python-Meister Mosh, ein Anfänger ohne Grundkenntnisse, kann in 6 Stunden loslegen</a> <div class="wzrthreerb"> <div >25976 Lernzeiten</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>Neueste Downloads</div> <a href="https://www.php.cn/de/xiazai">Mehr> </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">Web-Effekte <div></div></div> <div class="swiper-slide" data-id="twof">Quellcode der Website<div></div></div> <div class="swiper-slide" data-id="threef">Website-Materialien<div></div></div> <div class="swiper-slide" data-id="fourf">Frontend-Vorlage<div></div></div> </div> <ul class="onef"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="Kontaktcode für das jQuery-Enterprise-Nachrichtenformular" href="https://www.php.cn/de/toolset/js-special-effects/8071">[Formular-Schaltfläche] Kontaktcode für das jQuery-Enterprise-Nachrichtenformular</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="Wiedergabeeffekte für HTML5-MP3-Spieluhren" href="https://www.php.cn/de/toolset/js-special-effects/8070">[Spezialeffekte für Spieler] Wiedergabeeffekte für HTML5-MP3-Spieluhren</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="HTML5 coole Partikelanimations-Navigationsmenü-Spezialeffekte" href="https://www.php.cn/de/toolset/js-special-effects/8069">[Menünavigation] HTML5 coole Partikelanimations-Navigationsmenü-Spezialeffekte</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="Drag-and-Drop-Bearbeitungscode für visuelle jQuery-Formulare" href="https://www.php.cn/de/toolset/js-special-effects/8068">[Formular-Schaltfläche] Drag-and-Drop-Bearbeitungscode für visuelle jQuery-Formulare</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="VUE.JS imitiert den Kugou-Musik-Player-Code" href="https://www.php.cn/de/toolset/js-special-effects/8067">[Spezialeffekte für Spieler] VUE.JS imitiert den Kugou-Musik-Player-Code</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="Klassisches HTML5-Pushing-Box-Spiel" href="https://www.php.cn/de/toolset/js-special-effects/8066">[HTML5-Spezialeffekte] Klassisches HTML5-Pushing-Box-Spiel</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="jQuery-Scrollen zum Hinzufügen oder Reduzieren von Bildeffekten" href="https://www.php.cn/de/toolset/js-special-effects/8065">[Bildspezialeffekte] jQuery-Scrollen zum Hinzufügen oder Reduzieren von Bildeffekten</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="Persönlicher CSS3-Albumcover-Hover-Zoom-Effekt" href="https://www.php.cn/de/toolset/js-special-effects/8064">[Fotoalbumeffekte] Persönlicher CSS3-Albumcover-Hover-Zoom-Effekt</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/de/toolset/website-source-code/8328" title="Website-Vorlage für Reinigungs- und Reparaturdienste für Inneneinrichtungen" target="_blank">[Frontend-Vorlage] Website-Vorlage für Reinigungs- und Reparaturdienste für Inneneinrichtungen</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/de/toolset/website-source-code/8327" title="Persönliche Lebenslauf-Leitfaden-Seitenvorlage in frischen Farben" target="_blank">[Frontend-Vorlage] Persönliche Lebenslauf-Leitfaden-Seitenvorlage in frischen Farben</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/de/toolset/website-source-code/8326" title="Web-Vorlage für kreativen Job-Lebenslauf für Designer" target="_blank">[Frontend-Vorlage] Web-Vorlage für kreativen Job-Lebenslauf für Designer</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/de/toolset/website-source-code/8325" title="Website-Vorlage eines modernen Ingenieurbauunternehmens" target="_blank">[Frontend-Vorlage] Website-Vorlage eines modernen Ingenieurbauunternehmens</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/de/toolset/website-source-code/8324" title="Responsive HTML5-Vorlage für Bildungseinrichtungen" target="_blank">[Frontend-Vorlage] Responsive HTML5-Vorlage für Bildungseinrichtungen</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/de/toolset/website-source-code/8323" title="Vorlage für die Website eines Online-E-Book-Shops für Einkaufszentren" target="_blank">[Frontend-Vorlage] Vorlage für die Website eines Online-E-Book-Shops für Einkaufszentren</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/de/toolset/website-source-code/8322" title="IT-Technologie löst Website-Vorlage für Internetunternehmen" target="_blank">[Frontend-Vorlage] IT-Technologie löst Website-Vorlage für Internetunternehmen</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/de/toolset/website-source-code/8321" title="Website-Vorlage für Devisenhandelsdienste im violetten Stil" target="_blank">[Frontend-Vorlage] Website-Vorlage für Devisenhandelsdienste im violetten Stil</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/de/toolset/website-materials/3078" target="_blank" title="可爱的夏天元素矢量素材(EPS+PNG)">[PNG material] 可爱的夏天元素矢量素材(EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/de/toolset/website-materials/3077" target="_blank" title="四个红的的 2023 毕业徽章矢量素材(AI+EPS+PNG)">[PNG material] 四个红的的 2023 毕业徽章矢量素材(AI+EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/de/toolset/website-materials/3076" target="_blank" title="唱歌的小鸟和装满花朵的推车设计春天banner矢量素材(AI+EPS)">[Banner image] 唱歌的小鸟和装满花朵的推车设计春天banner矢量素材(AI+EPS)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/de/toolset/website-materials/3075" target="_blank" title="金色的毕业帽矢量素材(EPS+PNG)">[PNG material] 金色的毕业帽矢量素材(EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/de/toolset/website-materials/3074" target="_blank" title="黑白风格的山脉图标矢量素材(EPS+PNG)">[PNG material] 黑白风格的山脉图标矢量素材(EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/de/toolset/website-materials/3073" target="_blank" title="不同颜色披风和不同姿势的超级英雄剪影矢量素材(EPS+PNG)">[PNG material] 不同颜色披风和不同姿势的超级英雄剪影矢量素材(EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/de/toolset/website-materials/3072" target="_blank" title="扁平风格的植树节banner矢量素材(AI+EPS)">[Banner image] 扁平风格的植树节banner矢量素材(AI+EPS)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/de/toolset/website-materials/3071" target="_blank" title="九个漫画风格的爆炸聊天气泡矢量素材(EPS+PNG)">[PNG material] 九个漫画风格的爆炸聊天气泡矢量素材(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/de/toolset/website-source-code/8328" target="_blank" title="Website-Vorlage für Reinigungs- und Reparaturdienste für Inneneinrichtungen">[Frontend-Vorlage] Website-Vorlage für Reinigungs- und Reparaturdienste für Inneneinrichtungen</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/de/toolset/website-source-code/8327" target="_blank" title="Persönliche Lebenslauf-Leitfaden-Seitenvorlage in frischen Farben">[Frontend-Vorlage] Persönliche Lebenslauf-Leitfaden-Seitenvorlage in frischen Farben</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/de/toolset/website-source-code/8326" target="_blank" title="Web-Vorlage für kreativen Job-Lebenslauf für Designer">[Frontend-Vorlage] Web-Vorlage für kreativen Job-Lebenslauf für Designer</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/de/toolset/website-source-code/8325" target="_blank" title="Website-Vorlage eines modernen Ingenieurbauunternehmens">[Frontend-Vorlage] Website-Vorlage eines modernen Ingenieurbauunternehmens</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/de/toolset/website-source-code/8324" target="_blank" title="Responsive HTML5-Vorlage für Bildungseinrichtungen">[Frontend-Vorlage] Responsive HTML5-Vorlage für Bildungseinrichtungen</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/de/toolset/website-source-code/8323" target="_blank" title="Vorlage für die Website eines Online-E-Book-Shops für Einkaufszentren">[Frontend-Vorlage] Vorlage für die Website eines Online-E-Book-Shops für Einkaufszentren</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/de/toolset/website-source-code/8322" target="_blank" title="IT-Technologie löst Website-Vorlage für Internetunternehmen">[Frontend-Vorlage] IT-Technologie löst Website-Vorlage für Internetunternehmen</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/de/toolset/website-source-code/8321" target="_blank" title="Website-Vorlage für Devisenhandelsdienste im violetten Stil">[Frontend-Vorlage] Website-Vorlage für Devisenhandelsdienste im violetten Stil</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>Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!</p> </div> <div class="footermid"> <a href="https://www.php.cn/de/about/us.html">Über uns</a> <a href="https://www.php.cn/de/about/disclaimer.html">Haftungsausschluss</a> <a href="https://www.php.cn/de/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?1735458123"></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> <!-- Matomo --> <script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '9']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); </script> <!-- End Matomo Code --> </body> </html>