Maison > développement back-end > Tutoriel XML/RSS > Notes d'étude XML folles (13) --------- XML ​​DOM

Notes d'étude XML folles (13) --------- XML ​​DOM

黄舟
Libérer: 2017-02-21 14:51:21
original
1684 Les gens l'ont consulté

Le modèle objet de document XML définit des méthodes standard pour accéder et manipuler les documents XML.

DOM traite un document XML comme une structure arborescente, avec des feuilles définies comme des nœuds.

Qu'est-ce que XML DOM ?

XML DOM est :

  • Modèle objet standard pour XML

  • Interface de programmation standard pour XML

  • Neutre en matière de plate-forme et de langage

  • Normes W3C

XML DOM définit les objets et attributs de tous les éléments XML, ainsi que les méthodes (interfaces) pour y accéder.

En d'autres termes :

XML DOM est un standard permettant d'obtenir, de modifier, d'ajouter ou de supprimer des éléments XML.

Nœud XML DOM


Chaque composant d'un document XML est un nœud.

Nœud

Chaque composant du document XML selon le DOM Ils sont tous un nœud.

DOM est stipulé comme suit :

  • L'ensemble du document est un nœud de document

  • Chaque balise XML est un nœud d'élément

  • Le texte contenu dans l'élément XML est un nœud de texte

  • Chaque attribut XML est un nœud d'attribut

  • Les annotations appartiennent à des nœuds de commentaire

Instance DOM

Veuillez consulter le fichier XML suivant (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>
Copier après la connexion

Dans le XML ci-dessus, le nœud racine est . Tous les autres nœuds du document sont contenus dans la .

Le nœud racine

Le premier nœud comporte quatre nœuds : , <author>, <year>, chacun contenant un nœud de texte. , "Harry Potter", "JK Rowling", "2005" et "29.99". </span></p><p></p><h2><span style="font-size:18px">Le texte est toujours stocké dans des nœuds de texte </span></h2><p></p><p><span style="font-size:18px">Une fonctionnalité commune dans le traitement DOM L'erreur est que le nœud de l'élément est censé contenir du texte. </span></p><p><span style="font-size:18px">Cependant, le texte du nœud d'élément est stocké dans le nœud de texte. </span></p><p><span style="font-size:18px">Dans cet exemple : <em><year>2005</year></em>, le nœud d'élément <year>, a un nœud de texte avec une valeur de "2005 " . </span></p><p><span style="font-size:18px">"2005" <em>n'est pas la valeur de l'élément </em> <year> </span></p><p><span style="font-size:18px"></span> </p><p><strong><span style="font-size:18px">Arborescence des nœuds 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 Traitez le document XML DOM comme un arbre de nœuds. </span></strong></p><p><strong><span style="font-size:18px">Tous les nœuds de l'arborescence ont des relations les uns avec les autres. </span></strong></p><p></p><h2><span style="font-size:18px">Arborescence des nœuds XML DOM</span></h2><p></p><p><span style="font-size:18px">XML DOM Traite un document XML comme Une structure arborescente. Cette structure arborescente est appelée un <em>arbre de nœuds</em>. </span></p><p><span style="font-size:18px">Tous les nœuds sont accessibles via cette arborescence. Leur contenu peut être modifié ou supprimé, et de nouveaux éléments peuvent être créés. </span></p><p><span style="font-size:18px">Cet arbre de nœuds montre une collection de nœuds et les connexions entre eux. L'arborescence commence au nœud racine et se ramifie vers les nœuds de texte au niveau le plus bas de l'arborescence : </span></p><p><span style="font-size:18px"><img alt="DOM node tree" src/></span></p><p><span style="max-width:90%"> ci-dessus. l'image représente le fichier 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">Nœuds parents, enfants et frères et sœurs</span></h2><p></p><p><span style="font-size:18px">Les nœuds de l'arborescence des nœuds sont connectés à les uns les autres Il existe une relation hiérarchique entre eux. </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">Copier après la connexion</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">Copier après la connexion</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">Copier après la connexion</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">Copier après la connexion</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">Copier après la connexion</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">Copier après la connexion</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">Copier après la connexion</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">Copier après la connexion</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">Copier après la connexion</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">Copier après la connexion</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">Copier après la connexion</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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</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">Copier après la connexion</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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</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">Copier après la connexion</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">Copier après la connexion</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">Copier après la connexion</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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</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">Copier après la connexion</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">Copier après la connexion</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">Copier après la connexion</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">Copier après la connexion</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">Copier après la connexion</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">Copier après la connexion</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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</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">Copier après la connexion</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">Copier après la connexion</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">Copier après la connexion</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">Copier après la connexion</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">Copier après la connexion</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">Copier après la connexion</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">Copier après la connexion</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">Copier après la connexion</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">Copier après la connexion</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">Copier après la connexion</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">Copier après la connexion</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">Copier après la connexion</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">Copier après la connexion</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>Étiquettes associées:</span> <div class="wzcbqd"> <a onclick="hits_log(2,'www',this);" href-data="https://www.php.cn/fr/search?word=xml,学习笔记,dom" target="_blank">XML,学习笔记,DOM</a> </div> </div> <div style="display: inline-flex;float: right; color:#333333;">source:php.cn</div> </div> <div class="wzconOtherwz"> <a href="https://www.php.cn/fr/faq/352994.html" title="Notes d'étude XML folles (12)------------XPath"> <span>Article précédent:Notes d'étude XML folles (12)------------XPath</span> </a> <a href="https://www.php.cn/fr/faq/353158.html" title="Tutoriel Introduction à Java&Xml (1)"> <span>Article suivant:Tutoriel Introduction à Java&Xml (1)</span> </a> </div> <div class="wzconShengming"> <div class="bzsmdiv">Déclaration de ce site Web</div> <div>Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter 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">Derniers articles par auteur</div> <ul> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="https://www.php.cn/fr/faq/377601.html">Matériel vidéo sur la création de votre propre framework PHP à partir de zéro</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/fr/faq/377137.html">Exemple d'analyse de la façon dont PHPMailer utilise la boîte aux lettres QQ pour compléter la fonction d'envoi d'e-mails</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/fr/faq/376186.html">Introduction à la façon de recevoir des e-mails en IMAP en 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/fr/faq/375194.html">Exemple de mise en œuvre rapide de la déduplication de tableau en 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/fr/faq/369412.html">Résumé de l'utilisation de tous les attributs de la balise <a> en 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/fr/faq/379971.html">Résumé des connaissances de base de PHP (nécessaire aux débutants pour débuter)</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/fr/faq/381607.html">Introduction à l'utilisation de typeof en 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/fr/faq/382066.html">Introduction à l'utilisation de la méthode confirm() en 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/fr/faq/357705.html">Une introduction détaillée à l'attribut 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/fr/faq/380149.html">Comment implémenter la sélection unique, la sélection multiple et la sélection inversée dans les formulaires dans ReactJS</a> </div> <div>1970-01-01 08:00:00</div> </li> </ul> </div> <div class="wzconZzwz"> <div class="wzconZzwztitle">Derniers numéros</div> <div class="wdsyContent"> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="https://www.php.cn/fr/wenda/176411.html" target="_blank" title="function_exists() ne peut pas déterminer la fonction personnalisée" class="wdcdcTitle">function_exists() ne peut pas déterminer la fonction personnalisée</a> <a href="https://www.php.cn/fr/wenda/176411.html" class="wdcdcCons">Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> Depuis 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>2027</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/fr/wenda/176410.html" target="_blank" title="Comment afficher la version mobile de Google Chrome" class="wdcdcTitle">Comment afficher la version mobile de Google Chrome</a> <a href="https://www.php.cn/fr/wenda/176410.html" class="wdcdcCons">Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> Depuis 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>2190</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/fr/wenda/176407.html" target="_blank" title="La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas." class="wdcdcTitle">La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas.</a> <a href="https://www.php.cn/fr/wenda/176407.html" class="wdcdcCons">Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> Depuis 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>1846</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/fr/wenda/176406.html" target="_blank" title="Il n'y a aucune sortie dans la fenêtre parent" class="wdcdcTitle">Il n'y a aucune sortie dans la fenêtre parent</a> <a href="https://www.php.cn/fr/wenda/176406.html" class="wdcdcCons">document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> Depuis 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>1739</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/fr/wenda/176405.html" target="_blank" title="Où sont les didacticiels sur la cartographie mentale CSS ?" class="wdcdcTitle">Où sont les didacticiels sur la cartographie mentale CSS ?</a> <a href="https://www.php.cn/fr/wenda/176405.html" class="wdcdcCons">Didacticiel</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> Depuis 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>1759</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> </div> </div> <div class="wzconZt" > <div class="wzczt-title"> <div>Rubriques connexes</div> <a href="https://www.php.cn/fr/faq/zt" target="_blank">Plus> </a> </div> <div class="wzcttlist"> <ul> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/fr/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="Comment convertir un pdf au format XML" /> </a> <a target="_blank" href="https://www.php.cn/fr/faq/pdfzmzhcxmlgs" class="title-a-spanl" title="Comment convertir un pdf au format XML"><span>Comment convertir un pdf au format XML</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/fr/faq/rjcsgj"><img src="https://img.php.cn/upload/subject/202407/22/2024072214372543821.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Outils de test de logiciels" /> </a> <a target="_blank" href="https://www.php.cn/fr/faq/rjcsgj" class="title-a-spanl" title="Outils de test de logiciels"><span>Outils de test de logiciels</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/fr/faq/yjwzymzcdff"><img src="https://img.php.cn/upload/subject/202407/22/2024072212262475565.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Comment enregistrer un nom de domaine permanent pour un site Web" /> </a> <a target="_blank" href="https://www.php.cn/fr/faq/yjwzymzcdff" class="title-a-spanl" title="Comment enregistrer un nom de domaine permanent pour un site Web"><span>Comment enregistrer un nom de domaine permanent pour un site Web</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/fr/faq/momexecshcw"><img src="https://img.php.cn/upload/subject/202407/22/2024072213332650027.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="erreur d'initialisation mom.exe" /> </a> <a target="_blank" href="https://www.php.cn/fr/faq/momexecshcw" class="title-a-spanl" title="erreur d'initialisation mom.exe"><span>erreur d'initialisation mom.exe</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/fr/faq/pzjavahjbl"><img src="https://img.php.cn/upload/subject/202407/22/2024072214254917519.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Configurer les variables d'environnement Java" /> </a> <a target="_blank" href="https://www.php.cn/fr/faq/pzjavahjbl" class="title-a-spanl" title="Configurer les variables d'environnement Java"><span>Configurer les variables d'environnement Java</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/fr/faq/cdbdssmys"><img src="https://img.php.cn/upload/subject/202407/22/2024072214155159713.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Que signifient les faces C et B ?" /> </a> <a target="_blank" href="https://www.php.cn/fr/faq/cdbdssmys" class="title-a-spanl" title="Que signifient les faces C et B ?"><span>Que signifient les faces C et B ?</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/fr/faq/pythonwxyf"><img src="https://img.php.cn/upload/subject/202407/22/2024072213390185030.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Comment résoudre une syntaxe invalide en Python" /> </a> <a target="_blank" href="https://www.php.cn/fr/faq/pythonwxyf" class="title-a-spanl" title="Comment résoudre une syntaxe invalide en Python"><span>Comment résoudre une syntaxe invalide en Python</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/fr/faq/htmlrhszztys"><img src="https://img.php.cn/upload/subject/202407/22/2024072213525139682.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Comment définir la couleur de la police en HTML" /> </a> <a target="_blank" href="https://www.php.cn/fr/faq/htmlrhszztys" class="title-a-spanl" title="Comment définir la couleur de la police en HTML"><span>Comment définir la couleur de la police en HTML</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">Recommandations populaires</div> <div class="wzroList"> <ul> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="Quel est le format XML ?" href="https://www.php.cn/fr/faq/479745.html">Quel est le format XML ?</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="Quel logiciel utilisez-vous pour ouvrir les fichiers XML ?" href="https://www.php.cn/fr/faq/423189.html">Quel logiciel utilisez-vous pour ouvrir les fichiers XML ?</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="Qu'est-ce que XML et à quoi sert-il ?" href="https://www.php.cn/fr/faq/417105.html">Qu'est-ce que XML et à quoi sert-il ?</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="Quelles sont les quatre méthodes d'analyse courantes en XML ?" href="https://www.php.cn/fr/faq/416849.html">Quelles sont les quatre méthodes d'analyse courantes en XML ?</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="Quelles sont les manières d'analyser XML en Java ?" href="https://www.php.cn/fr/faq/417232.html">Quelles sont les manières d'analyser XML en Java ?</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>Tutoriels populaires</div> <a target="_blank" href="https://www.php.cn/fr/course.html">Plus> </a> </div> <div class="wzrthreelist swiper2"> <div class="wzrthreeTab swiper-wrapper"> <div class="check tabdiv swiper-slide" data-id="one">Tutoriels associés <div></div></div> <div class="tabdiv swiper-slide" data-id="two">Recommandations populaires<div></div></div> <div class="tabdiv swiper-slide" data-id="three">Derniers cours<div></div></div> </div> <ul class="one"> <li> <a target="_blank" href="https://www.php.cn/fr/course/812.html" title="Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)" href="https://www.php.cn/fr/course/812.html">Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)</a> <div class="wzrthreerb"> <div>1421061 <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/fr/course/74.html" title="Premier tutoriel d'introduction à PHP : Apprenez PHP en une semaine" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/6253d1e28ef5c345.png" alt="Premier tutoriel d'introduction à PHP : Apprenez PHP en une semaine"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Premier tutoriel d'introduction à PHP : Apprenez PHP en une semaine" href="https://www.php.cn/fr/course/74.html">Premier tutoriel d'introduction à PHP : Apprenez PHP en une semaine</a> <div class="wzrthreerb"> <div>4264628 <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/fr/course/286.html" title="Tutoriel vidéo JAVA pour débutants" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a2bacfd9379.png" alt="Tutoriel vidéo JAVA pour débutants"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Tutoriel vidéo JAVA pour débutants" href="https://www.php.cn/fr/course/286.html">Tutoriel vidéo JAVA pour débutants</a> <div class="wzrthreerb"> <div>2514627 <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/fr/course/504.html" title="Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a67ce3a6655.png" alt="Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle" href="https://www.php.cn/fr/course/504.html">Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle</a> <div class="wzrthreerb"> <div>506107 <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/fr/course/2.html" title="Tutoriel d'introduction PHP base zéro" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/6253de27bc161468.png" alt="Tutoriel d'introduction PHP base zéro"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Tutoriel d'introduction PHP base zéro" href="https://www.php.cn/fr/course/2.html">Tutoriel d'introduction PHP base zéro</a> <div class="wzrthreerb"> <div>861192 <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/fr/course/812.html" title="Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)" href="https://www.php.cn/fr/course/812.html">Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)</a> <div class="wzrthreerb"> <div >1421061 temps d'étude</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/fr/course/286.html" title="Tutoriel vidéo JAVA pour débutants" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a2bacfd9379.png" alt="Tutoriel vidéo JAVA pour débutants"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Tutoriel vidéo JAVA pour débutants" href="https://www.php.cn/fr/course/286.html">Tutoriel vidéo JAVA pour débutants</a> <div class="wzrthreerb"> <div >2514627 temps d'étude</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/fr/course/504.html" title="Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a67ce3a6655.png" alt="Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle" href="https://www.php.cn/fr/course/504.html">Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle</a> <div class="wzrthreerb"> <div >506107 temps d'étude</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/fr/course/901.html" title="Introduction rapide au développement web front-end" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/64be28a53a4f6310.png" alt="Introduction rapide au développement web front-end"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Introduction rapide au développement web front-end" href="https://www.php.cn/fr/course/901.html">Introduction rapide au développement web front-end</a> <div class="wzrthreerb"> <div >215595 temps d'étude</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/fr/course/234.html" title="Maîtrisez les didacticiels vidéo PS à partir de zéro" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62611f57ed0d4840.jpg" alt="Maîtrisez les didacticiels vidéo PS à partir de zéro"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Maîtrisez les didacticiels vidéo PS à partir de zéro" href="https://www.php.cn/fr/course/234.html">Maîtrisez les didacticiels vidéo PS à partir de zéro</a> <div class="wzrthreerb"> <div >885718 temps d'étude</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/fr/course/1648.html" title="[Web front-end] Démarrage rapide de Node.js" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png" alt="[Web front-end] Démarrage rapide de Node.js"/> </a> <div class="wzrthree-right"> <a target="_blank" title="[Web front-end] Démarrage rapide de Node.js" href="https://www.php.cn/fr/course/1648.html">[Web front-end] Démarrage rapide de Node.js</a> <div class="wzrthreerb"> <div >7172 temps d'étude</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/fr/course/1647.html" title="Collection complète de cours full-stack de développement Web étranger" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/6628cc96e310c937.png" alt="Collection complète de cours full-stack de développement Web étranger"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Collection complète de cours full-stack de développement Web étranger" href="https://www.php.cn/fr/course/1647.html">Collection complète de cours full-stack de développement Web étranger</a> <div class="wzrthreerb"> <div >5565 temps d'étude</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/fr/course/1646.html" title="Aller au langage pratique GraphQL" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/662221173504a436.png" alt="Aller au langage pratique GraphQL"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Aller au langage pratique GraphQL" href="https://www.php.cn/fr/course/1646.html">Aller au langage pratique GraphQL</a> <div class="wzrthreerb"> <div >4686 temps d'étude</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/fr/course/1645.html" title="Le maître du ventilateur de 550 W apprend JavaScript à partir de zéro, étape par étape" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/662077e163124646.png" alt="Le maître du ventilateur de 550 W apprend JavaScript à partir de zéro, étape par étape"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Le maître du ventilateur de 550 W apprend JavaScript à partir de zéro, étape par étape" href="https://www.php.cn/fr/course/1645.html">Le maître du ventilateur de 550 W apprend JavaScript à partir de zéro, étape par étape</a> <div class="wzrthreerb"> <div >671 temps d'étude</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/fr/course/1644.html" title="Le maître Python Mosh, un débutant sans aucune connaissance de base peut commencer en 6 heures" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/6616418ca80b8916.png" alt="Le maître Python Mosh, un débutant sans aucune connaissance de base peut commencer en 6 heures"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Le maître Python Mosh, un débutant sans aucune connaissance de base peut commencer en 6 heures" href="https://www.php.cn/fr/course/1644.html">Le maître Python Mosh, un débutant sans aucune connaissance de base peut commencer en 6 heures</a> <div class="wzrthreerb"> <div >23686 temps d'étude</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>Derniers téléchargements</div> <a href="https://www.php.cn/fr/xiazai">Plus> </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">effets Web <div></div></div> <div class="swiper-slide" data-id="twof">Code source du site Web<div></div></div> <div class="swiper-slide" data-id="threef">Matériel du site Web<div></div></div> <div class="swiper-slide" data-id="fourf">Modèle frontal<div></div></div> </div> <ul class="onef"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="Code de contact du formulaire de message d'entreprise jQuery" href="https://www.php.cn/fr/toolset/js-special-effects/8071">[bouton de formulaire] Code de contact du formulaire de message d'entreprise jQuery</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="Effets de lecture de boîte à musique HTML5 MP3" href="https://www.php.cn/fr/toolset/js-special-effects/8070">[Effets spéciaux du joueur] Effets de lecture de boîte à musique HTML5 MP3</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="Effets spéciaux du menu de navigation d'animation de particules cool HTML5" href="https://www.php.cn/fr/toolset/js-special-effects/8069">[Navigation dans les menus] Effets spéciaux du menu de navigation d'animation de particules cool HTML5</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="Code d'édition par glisser-déposer du formulaire visuel jQuery" href="https://www.php.cn/fr/toolset/js-special-effects/8068">[bouton de formulaire] Code d'édition par glisser-déposer du formulaire visuel jQuery</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="Code du lecteur de musique Kugou imitation VUE.JS" href="https://www.php.cn/fr/toolset/js-special-effects/8067">[Effets spéciaux du joueur] Code du lecteur de musique Kugou imitation VUE.JS</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="Jeu de boîte de poussée HTML5 classique" href="https://www.php.cn/fr/toolset/js-special-effects/8066">[effets spéciaux HTML5] Jeu de boîte de poussée HTML5 classique</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="défilement jQuery pour ajouter ou réduire des effets d'image" href="https://www.php.cn/fr/toolset/js-special-effects/8065">[Effets spéciaux d'image] défilement jQuery pour ajouter ou réduire des effets d'image</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="Effet de zoom de survol de la couverture de l'album personnel CSS3" href="https://www.php.cn/fr/toolset/js-special-effects/8064">[Effets d'album photo] Effet de zoom de survol de la couverture de l'album personnel 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/fr/toolset/website-source-code/8328" title="Modèle de site Web d'entreprise de services de nettoyage et de réparation de décoration intérieure" target="_blank">[Modèle frontal] Modèle de site Web d'entreprise de services de nettoyage et de réparation de décoration intérieure</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/fr/toolset/website-source-code/8327" title="Modèle de page de guide de CV personnel aux couleurs fraîches" target="_blank">[Modèle frontal] Modèle de page de guide de CV personnel aux couleurs fraîches</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/fr/toolset/website-source-code/8326" title="Modèle Web de CV de travail créatif de concepteur" target="_blank">[Modèle frontal] Modèle Web de CV de travail créatif de concepteur</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/fr/toolset/website-source-code/8325" title="Modèle de site Web d'entreprise de construction d'ingénierie moderne" target="_blank">[Modèle frontal] Modèle de site Web d'entreprise de construction d'ingénierie moderne</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/fr/toolset/website-source-code/8324" title="Modèle HTML5 réactif pour les établissements de services éducatifs" target="_blank">[Modèle frontal] Modèle HTML5 réactif pour les établissements de services éducatifs</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/fr/toolset/website-source-code/8323" title="Modèle de site Web de centre commercial de boutique de livres électroniques en ligne" target="_blank">[Modèle frontal] Modèle de site Web de centre commercial de boutique de livres électroniques en ligne</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/fr/toolset/website-source-code/8322" title="La technologie informatique résout le modèle de site Web d'entreprise Internet" target="_blank">[Modèle frontal] La technologie informatique résout le modèle de site Web d'entreprise Internet</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/fr/toolset/website-source-code/8321" title="Modèle de site Web de service de trading de devises de style violet" target="_blank">[Modèle frontal] Modèle de site Web de service de trading de devises de style violet</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/fr/toolset/website-materials/3078" target="_blank" title="Matériau vectoriel d'éléments d'été mignons (EPS+PNG)">[Matériau PNG] Matériau vectoriel d'éléments d'été mignons (EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/fr/toolset/website-materials/3077" target="_blank" title="Matériel vectoriel de quatre badges de graduation rouges 2023 (AI+EPS+PNG)">[Matériau PNG] Matériel vectoriel de quatre badges de graduation rouges 2023 (AI+EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/fr/toolset/website-materials/3076" target="_blank" title="Oiseau chantant et chariot rempli de fleurs design matériel vectoriel de bannière de printemps (AI + EPS)">[image de bannière] Oiseau chantant et chariot rempli de fleurs design matériel vectoriel de bannière de printemps (AI + EPS)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/fr/toolset/website-materials/3075" target="_blank" title="Matériau vectoriel de chapeau de graduation doré (EPS+PNG)">[Matériau PNG] Matériau vectoriel de chapeau de graduation doré (EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/fr/toolset/website-materials/3074" target="_blank" title="Matériel vectoriel d'icône de montagne de style noir et blanc (EPS+PNG)">[Matériau PNG] Matériel vectoriel d'icône de montagne de style noir et blanc (EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/fr/toolset/website-materials/3073" target="_blank" title="Matériel vectoriel de silhouette de super-héros (EPS+PNG) avec des capes de couleurs différentes et des poses différentes">[Matériau PNG] Matériel vectoriel de silhouette de super-héros (EPS+PNG) avec des capes de couleurs différentes et des poses différentes</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/fr/toolset/website-materials/3072" target="_blank" title="Matériel vectoriel de bannière Arbor Day de style plat (AI + EPS)">[image de bannière] Matériel vectoriel de bannière Arbor Day de style plat (AI + EPS)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/fr/toolset/website-materials/3071" target="_blank" title="Matériel vectoriel de neuf bulles de discussion explosives de style bande dessinée (EPS+PNG)">[Matériau PNG] Matériel vectoriel de neuf bulles de discussion explosives de style bande dessinée (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/fr/toolset/website-source-code/8328" target="_blank" title="Modèle de site Web d'entreprise de services de nettoyage et de réparation de décoration intérieure">[Modèle frontal] Modèle de site Web d'entreprise de services de nettoyage et de réparation de décoration intérieure</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/fr/toolset/website-source-code/8327" target="_blank" title="Modèle de page de guide de CV personnel aux couleurs fraîches">[Modèle frontal] Modèle de page de guide de CV personnel aux couleurs fraîches</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/fr/toolset/website-source-code/8326" target="_blank" title="Modèle Web de CV de travail créatif de concepteur">[Modèle frontal] Modèle Web de CV de travail créatif de concepteur</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/fr/toolset/website-source-code/8325" target="_blank" title="Modèle de site Web d'entreprise de construction d'ingénierie moderne">[Modèle frontal] Modèle de site Web d'entreprise de construction d'ingénierie moderne</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/fr/toolset/website-source-code/8324" target="_blank" title="Modèle HTML5 réactif pour les établissements de services éducatifs">[Modèle frontal] Modèle HTML5 réactif pour les établissements de services éducatifs</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/fr/toolset/website-source-code/8323" target="_blank" title="Modèle de site Web de centre commercial de boutique de livres électroniques en ligne">[Modèle frontal] Modèle de site Web de centre commercial de boutique de livres électroniques en ligne</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/fr/toolset/website-source-code/8322" target="_blank" title="La technologie informatique résout le modèle de site Web d'entreprise Internet">[Modèle frontal] La technologie informatique résout le modèle de site Web d'entreprise Internet</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/fr/toolset/website-source-code/8321" target="_blank" title="Modèle de site Web de service de trading de devises de style violet">[Modèle frontal] Modèle de site Web de service de trading de devises de style violet</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>Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!</p> </div> <div class="footermid"> <a href="https://www.php.cn/fr/about/us.html">À propos de nous</a> <a href="https://www.php.cn/fr/about/disclaimer.html">Clause de non-responsabilité</a> <a href="https://www.php.cn/fr/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?1732760835"></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>