めちゃくちゃなXML学習メモ(13)-----XML DOM

黄舟
リリース: 2017-02-21 14:51:21
オリジナル
1671 人が閲覧しました

XML ドキュメント オブジェクト モデルは、XML ドキュメントにアクセスして操作するための標準メソッドを定義します。

DOM は、XML ドキュメントを、葉がノードとして定義されたツリー構造として扱います。 XML DOM とは何ですか? XML の標準プログラミング インターフェイス

プラットフォームと言語に中立

W3C の標準

  • XML DOM は オブジェクトと属性を定義します

    すべての XML 要素についても同様ですそれらにアクセスするための
  • メソッド(インターフェース)
  • として。

    言い換えると:
  • XML DOM は、XML 要素を取得、変更、追加、削除するための標準です。 XML ドキュメント内の各コンポーネントはノードです。

  • ノード

DOMによれば、XMLドキュメント内のすべてのコンポーネントはノードです。

DOMは次のように指定されます:

ドキュメント全体がドキュメントノードです​​

各XMLタグが要素ノードです

​​

XML要素に含まれるテキストはテキストノード


各 XML 属性は属性ノード

アノテーションはアノテーションノード

DOM インスタンス

に属します

以下のXMLファイルをご覧ください(書籍.xml):

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

<bookstore>

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

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

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

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

</bookstore>
ログイン後にコピー

上記の XML では、ルート ノードは です。ドキュメント内の他のすべてのノードは 内に含まれます。
  • ルート ノード には 4 つの ノードがあります。

  • 最初の には、、<author>、<year>、<price> の 4 つのノードがあり、それぞれにテキスト ノード「Harry Potter」、「J」が含まれています。 K.ローリング」、「2005」、「29.99」。 <p><span style="font-size:18px"></span></p></li><li>テキストは常にテキストノードに保存されます<p><span style="font-size:18px"></span></p></li><li> DOM 処理でよくある間違いは、要素ノードにテキストが含まれていると考えることです。 <p><span style="font-size:18px"></span></p>ただし、要素ノードのテキストはテキストノードに格納されます。 </li><li><p><span style="font-size:18px"> この例: </span><year>2005</year></p>、要素ノード <year> には、値「2005」のテキスト ノードがあります。 </li></ul><p></p>「2005」<h2>は <span style="font-size:18px"> <year> 要素の値ではありません。 </span></h2><p></p><p><span style="font-size:18px"></span></p><p>XML DOM XML DOM は、XML DOM ドキュメントをノード ツリー (ツリー) として扱います。 <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>XML DOM ノードツリー<h2><span style="font-size:18px"></span></h2><p></p>XML DOM は、XML ドキュメントをツリー構造として扱います。このツリー構造は<p>ノードツリー<span style="font-size:18px">と呼ばれます。 </span></p><p><span style="font-size:18px">このツリーを通じてすべてのノードにアクセスできます。それらの内容は変更または削除でき、新しい要素を作成できます。 </span></p><p><span style="font-size:18px">このノード ツリーには、ノードのコレクションとノード間の接続が表示されます。ツリーはルート ノードから始まり、ツリーの最下位レベルのテキスト ノードに向かって分岐します: <em></em></span></p><p><span style="font-size:18px"><em></em></span> 上の画像は XML ファイル </p><p>books.xml<span style="font-size:18px"></span> を表します。 </p><p><strong><span style="font-size:18px"></span></strong>親ノード、子ノード、兄弟ノード</p><p><strong><span style="font-size:18px"></span></strong> ノードツリー内のノードは相互に階層関係を持ちます。 </p><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">ログイン後にコピー</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">ログイン後にコピー</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">ログイン後にコピー</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">ログイン後にコピー</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">ログイン後にコピー</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">ログイン後にコピー</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">ログイン後にコピー</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">ログイン後にコピー</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">ログイン後にコピー</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">ログイン後にコピー</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">ログイン後にコピー</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">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</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">ログイン後にコピー</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">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</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">ログイン後にコピー</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">ログイン後にコピー</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">ログイン後にコピー</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">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</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">ログイン後にコピー</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">ログイン後にコピー</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">ログイン後にコピー</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">ログイン後にコピー</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">ログイン後にコピー</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">ログイン後にコピー</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">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</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">ログイン後にコピー</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">ログイン後にコピー</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">ログイン後にコピー</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">ログイン後にコピー</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">ログイン後にコピー</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">ログイン後にコピー</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">ログイン後にコピー</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">ログイン後にコピー</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">ログイン後にコピー</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">ログイン後にコピー</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">ログイン後にコピー</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">ログイン後にコピー</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">ログイン後にコピー</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></span></p> </div> </div> <div style="height: 25px;"> <div class="wzconBq" style="display: inline-flex;"> <span>関連ラベル:</span> <div class="wzcbqd"> <a onclick="hits_log(2,'www',this);" href-data="http://www.php.cn/ja/search?word=xml,学习笔记,dom" target="_blank">XML,学习笔记,DOM</a> </div> </div> <div style="display: inline-flex;float: right; color:#333333;">ソース:php.cn</div> </div> <div class="wzconOtherwz"> <a href="http://www.php.cn/ja/faq/352994.html" title="クレイジー XML 学習メモ (12)----------XPath"> <span>前の記事:クレイジー XML 学習メモ (12)----------XPath</span> </a> <a href="http://www.php.cn/ja/faq/353158.html" title="Java&Xml入門チュートリアル(1)"> <span>次の記事:Java&Xml入門チュートリアル(1)</span> </a> </div> <div class="wzconShengming"> <div class="bzsmdiv">このウェブサイトの声明</div> <div>この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。</div> </div> <div class="wwads-cn wwads-horizontal" data-id="156" style="max-width:955px"></div> <div class="wzconZzwz"> <div class="wzconZzwztitle">著者別の最新記事</div> <ul> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/ja/faq/377601.html">独自の PHP フレームワークをゼロから構築するためのビデオ資料</a> </div> <div>2023-03-15 16:54:01</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/ja/faq/377137.html">PHPMailer が QQ メールボックスを使用して電子メール送信機能を完了する方法の分析例</a> </div> <div>2023-03-15 12:26:02</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/ja/faq/376186.html">PHPでIMAPでメールを受信する方法の紹介</a> </div> <div>2023-03-14 18:58:01</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/ja/faq/375194.html">PHP で配列の重複排除を迅速に実装する方法の例</a> </div> <div>2023-03-14 11:30:01</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/ja/faq/369412.html">HTML での <a> タグのすべての属性の使用の概要</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/ja/faq/379971.html">PHPの基礎知識まとめ(初心者が始めるのに必要)</a> </div> <div>2023-03-16 15:20:01</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/ja/faq/381607.html">JavaScript での typeof の使用の概要</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/ja/faq/382066.html">JavaScript でのconfirm() メソッドの使用の概要</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/ja/faq/357705.html">HTML5 プレースホルダー属性の詳細な紹介</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="http://www.php.cn/ja/faq/380149.html">ReactJS のフォームに単一選択、複数選択、逆選択を実装する方法</a> </div> <div>1970-01-01 08:00:00</div> </li> </ul> </div> <div class="wzconZzwz"> <div class="wzconZzwztitle">最新の問題</div> <div class="wdsyContent"> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="http://www.php.cn/ja/wenda/176411.html" target="_blank" title="function_exists() はカスタム関数を決定できません" class="wdcdcTitle">function_exists() はカスタム関数を決定できません</a> <a href="http://www.php.cn/ja/wenda/176411.html" class="wdcdcCons">Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> から 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>1846</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="http://www.php.cn/ja/wenda/176410.html" target="_blank" title="Google Chromeのモバイル版を表示する方法" class="wdcdcTitle">Google Chromeのモバイル版を表示する方法</a> <a href="http://www.php.cn/ja/wenda/176410.html" class="wdcdcCons">こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> から 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>10</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>2017</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="http://www.php.cn/ja/wenda/176407.html" target="_blank" title="子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。" class="wdcdcTitle">子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。</a> <a href="http://www.php.cn/ja/wenda/176407.html" class="wdcdcCons">最初の 2 つの文は実行可能ですが、最後の文は実装できません。</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> から 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>1698</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="http://www.php.cn/ja/wenda/176406.html" target="_blank" title="親ウィンドウには出力がありません" class="wdcdcTitle">親ウィンドウには出力がありません</a> <a href="http://www.php.cn/ja/wenda/176406.html" class="wdcdcCons">document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> から 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>1598</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="http://www.php.cn/ja/wenda/176405.html" target="_blank" title="CSS マインド マッピングに関するコースウェアはどこにありますか?" class="wdcdcTitle">CSS マインド マッピングに関するコースウェアはどこにありますか?</a> <a href="http://www.php.cn/ja/wenda/176405.html" class="wdcdcCons">コースウェア</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> から 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>1615</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> </div> </div> <div class="wzconZt" > <div class="wzczt-title"> <div>関連トピック</div> <a href="http://www.php.cn/ja/faq/zt" target="_blank">詳細> </a> </div> <div class="wzcttlist"> <ul> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/ja/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="PDFをXML形式に変換する方法" /> </a> <a target="_blank" href="http://www.php.cn/ja/faq/pdfzmzhcxmlgs" class="title-a-spanl" title="PDFをXML形式に変換する方法"><span>PDFをXML形式に変換する方法</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/ja/faq/golangynxsjzh"><img src="https://img.php.cn/upload/subject/202407/22/2024072213284192768.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="golangのデータ変換方法にはどのようなものがありますか?" /> </a> <a target="_blank" href="http://www.php.cn/ja/faq/golangynxsjzh" class="title-a-spanl" title="golangのデータ変換方法にはどのようなものがありますか?"><span>golangのデータ変換方法にはどのようなものがありますか?</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/ja/faq/cadxlhhmy"><img src="https://img.php.cn/upload/subject/202407/22/2024072214401211850.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="cad2012 のシリアル番号とキー" /> </a> <a target="_blank" href="http://www.php.cn/ja/faq/cadxlhhmy" class="title-a-spanl" title="cad2012 のシリアル番号とキー"><span>cad2012 のシリアル番号とキー</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/ja/faq/pycharmrhyxpy"><img src="https://img.php.cn/upload/subject/202407/22/2024072212073468051.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="pycharm が Python ファイルを実行する方法" /> </a> <a target="_blank" href="http://www.php.cn/ja/faq/pycharmrhyxpy" class="title-a-spanl" title="pycharm が Python ファイルを実行する方法"><span>pycharm が Python ファイルを実行する方法</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/ja/faq/phpjddwzdjjc"><img src="https://img.php.cn/upload/subject/202407/22/2024072212193168534.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="PHPの簡単なWebサイト構築チュートリアル" /> </a> <a target="_blank" href="http://www.php.cn/ja/faq/phpjddwzdjjc" class="title-a-spanl" title="PHPの簡単なWebサイト構築チュートリアル"><span>PHPの簡単なWebサイト構築チュートリアル</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/ja/faq/jxbcxwtzmjj"><img src="https://img.php.cn/upload/subject/202407/22/2024072213515727603.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="パッケージ解析時の問題を解決する方法" /> </a> <a target="_blank" href="http://www.php.cn/ja/faq/jxbcxwtzmjj" class="title-a-spanl" title="パッケージ解析時の問題を解決する方法"><span>パッケージ解析時の問題を解決する方法</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/ja/faq/jspfygrhsx"><img src="https://img.php.cn/upload/subject/202407/22/2024072214411626497.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="JSPページング関数の実装方法" /> </a> <a target="_blank" href="http://www.php.cn/ja/faq/jspfygrhsx" class="title-a-spanl" title="JSPページング関数の実装方法"><span>JSPページング関数の実装方法</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/ja/faq/gnbtbrhmm"><img src="https://img.php.cn/upload/subject/202407/22/2024072212211382081.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="中国でビットコインを売買する方法" /> </a> <a target="_blank" href="http://www.php.cn/ja/faq/gnbtbrhmm" class="title-a-spanl" title="中国でビットコインを売買する方法"><span>中国でビットコインを売買する方法</span> </a> </li> </ul> </div> </div> </div> </div> <div class="phpwzright"> <div class="wzrOne"> <div class="wzroTitle">人気のおすすめ</div> <div class="wzroList"> <ul> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="XMLとはどのような形式ですか?" href="http://www.php.cn/ja/faq/479745.html">XMLとはどのような形式ですか?</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="XMLファイルを開くのにどのようなソフトウェアを使用していますか?" href="http://www.php.cn/ja/faq/423189.html">XMLファイルを開くのにどのようなソフトウェアを使用していますか?</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="XML とは何ですか?またその機能は何ですか?" href="http://www.php.cn/ja/faq/417105.html">XML とは何ですか?またその機能は何ですか?</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="XML の 4 つの一般的な解析方法は何ですか?" href="http://www.php.cn/ja/faq/416849.html">XML の 4 つの一般的な解析方法は何ですか?</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="Java で XML を解析するにはどのような方法がありますか?" href="http://www.php.cn/ja/faq/417232.html">Java で XML を解析するにはどのような方法がありますか?</a> </div> </li> </ul> </div> </div> <script src="https://sw.php.cn/hezuo/cac1399ab368127f9b113b14eb3316d0.js" type="text/javascript"></script> <div class="wzrThree"> <div class="wzrthree-title"> <div>人気のチュートリアル</div> <a target="_blank" href="http://www.php.cn/ja/course.html">詳細> </a> </div> <div class="wzrthreelist swiper2"> <div class="wzrthreeTab swiper-wrapper"> <div class="check tabdiv swiper-slide" data-id="one">関連するチュートリアル <div></div></div> <div class="tabdiv swiper-slide" data-id="two">人気のおすすめ<div></div></div> <div class="tabdiv swiper-slide" data-id="three">最新のコース<div></div></div> </div> <ul class="one"> <li> <a target="_blank" href="http://www.php.cn/ja/course/812.html" title="最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライン トレーニング コース)" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライン トレーニング コース)"/> </a> <div class="wzrthree-right"> <a target="_blank" title="最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライン トレーニング コース)" href="http://www.php.cn/ja/course/812.html">最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライン トレーニング コース)</a> <div class="wzrthreerb"> <div>1417718 <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="http://www.php.cn/ja/course/74.html" title="PHP 入門チュートリアル 1: 1 週間で PHP を学ぶ" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/6253d1e28ef5c345.png" alt="PHP 入門チュートリアル 1: 1 週間で PHP を学ぶ"/> </a> <div class="wzrthree-right"> <a target="_blank" title="PHP 入門チュートリアル 1: 1 週間で PHP を学ぶ" href="http://www.php.cn/ja/course/74.html">PHP 入門チュートリアル 1: 1 週間で PHP を学ぶ</a> <div class="wzrthreerb"> <div>4258908 <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="http://www.php.cn/ja/course/286.html" title="JAVA 初心者向けビデオチュートリアル" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a2bacfd9379.png" alt="JAVA 初心者向けビデオチュートリアル"/> </a> <div class="wzrthree-right"> <a target="_blank" title="JAVA 初心者向けビデオチュートリアル" href="http://www.php.cn/ja/course/286.html">JAVA 初心者向けビデオチュートリアル</a> <div class="wzrthreerb"> <div>2485993 <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="http://www.php.cn/ja/course/504.html" title="Little Turtle のゼロベースの Python 学習入門ビデオ チュートリアル" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a67ce3a6655.png" alt="Little Turtle のゼロベースの Python 学習入門ビデオ チュートリアル"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Little Turtle のゼロベースの Python 学習入門ビデオ チュートリアル" href="http://www.php.cn/ja/course/504.html">Little Turtle のゼロベースの Python 学習入門ビデオ チュートリアル</a> <div class="wzrthreerb"> <div>504201 <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="http://www.php.cn/ja/course/2.html" title="PHP ゼロベースの入門チュートリアル" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/6253de27bc161468.png" alt="PHP ゼロベースの入門チュートリアル"/> </a> <div class="wzrthree-right"> <a target="_blank" title="PHP ゼロベースの入門チュートリアル" href="http://www.php.cn/ja/course/2.html">PHP ゼロベースの入門チュートリアル</a> <div class="wzrthreerb"> <div>858910 <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="http://www.php.cn/ja/course/812.html" title="最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライン トレーニング コース)" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライン トレーニング コース)"/> </a> <div class="wzrthree-right"> <a target="_blank" title="最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライン トレーニング コース)" href="http://www.php.cn/ja/course/812.html">最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライン トレーニング コース)</a> <div class="wzrthreerb"> <div >1417718 回の学習</div> <div class="courseICollection" data-id="812"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/ja/course/286.html" title="JAVA 初心者向けビデオチュートリアル" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a2bacfd9379.png" alt="JAVA 初心者向けビデオチュートリアル"/> </a> <div class="wzrthree-right"> <a target="_blank" title="JAVA 初心者向けビデオチュートリアル" href="http://www.php.cn/ja/course/286.html">JAVA 初心者向けビデオチュートリアル</a> <div class="wzrthreerb"> <div >2485993 回の学習</div> <div class="courseICollection" data-id="286"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/ja/course/504.html" title="Little Turtle のゼロベースの Python 学習入門ビデオ チュートリアル" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a67ce3a6655.png" alt="Little Turtle のゼロベースの Python 学習入門ビデオ チュートリアル"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Little Turtle のゼロベースの Python 学習入門ビデオ チュートリアル" href="http://www.php.cn/ja/course/504.html">Little Turtle のゼロベースの Python 学習入門ビデオ チュートリアル</a> <div class="wzrthreerb"> <div >504201 回の学習</div> <div class="courseICollection" data-id="504"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/ja/course/901.html" title="Web フロントエンド開発の簡単な紹介" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/64be28a53a4f6310.png" alt="Web フロントエンド開発の簡単な紹介"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Web フロントエンド開発の簡単な紹介" href="http://www.php.cn/ja/course/901.html">Web フロントエンド開発の簡単な紹介</a> <div class="wzrthreerb"> <div >215359 回の学習</div> <div class="courseICollection" data-id="901"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/ja/course/234.html" title="PSビデオチュートリアルをゼロからマスターする" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62611f57ed0d4840.jpg" alt="PSビデオチュートリアルをゼロからマスターする"/> </a> <div class="wzrthree-right"> <a target="_blank" title="PSビデオチュートリアルをゼロからマスターする" href="http://www.php.cn/ja/course/234.html">PSビデオチュートリアルをゼロからマスターする</a> <div class="wzrthreerb"> <div >879794 回の学習</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="http://www.php.cn/ja/course/1648.html" title="[Web フロントエンド] Node.js クイック スタート" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png" alt="[Web フロントエンド] Node.js クイック スタート"/> </a> <div class="wzrthree-right"> <a target="_blank" title="[Web フロントエンド] Node.js クイック スタート" href="http://www.php.cn/ja/course/1648.html">[Web フロントエンド] Node.js クイック スタート</a> <div class="wzrthreerb"> <div >6585 回の学習</div> <div class="courseICollection" data-id="1648"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/ja/course/1647.html" title="海外のWeb開発フルスタックコースの完全なコレクション" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/6628cc96e310c937.png" alt="海外のWeb開発フルスタックコースの完全なコレクション"/> </a> <div class="wzrthree-right"> <a target="_blank" title="海外のWeb開発フルスタックコースの完全なコレクション" href="http://www.php.cn/ja/course/1647.html">海外のWeb開発フルスタックコースの完全なコレクション</a> <div class="wzrthreerb"> <div >5117 回の学習</div> <div class="courseICollection" data-id="1647"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/ja/course/1646.html" title="Go言語実践GraphQL" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/662221173504a436.png" alt="Go言語実践GraphQL"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Go言語実践GraphQL" href="http://www.php.cn/ja/course/1646.html">Go言語実践GraphQL</a> <div class="wzrthreerb"> <div >4290 回の学習</div> <div class="courseICollection" data-id="1646"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/ja/course/1645.html" title="550W ファンマスターが JavaScript をゼロから段階的に学習します" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/662077e163124646.png" alt="550W ファンマスターが JavaScript をゼロから段階的に学習します"/> </a> <div class="wzrthree-right"> <a target="_blank" title="550W ファンマスターが JavaScript をゼロから段階的に学習します" href="http://www.php.cn/ja/course/1645.html">550W ファンマスターが JavaScript をゼロから段階的に学習します</a> <div class="wzrthreerb"> <div >638 回の学習</div> <div class="courseICollection" data-id="1645"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/ja/course/1644.html" title="Python マスター Mosh、基礎知識ゼロの初心者でも 6 時間で始められる" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/6616418ca80b8916.png" alt="Python マスター Mosh、基礎知識ゼロの初心者でも 6 時間で始められる"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Python マスター Mosh、基礎知識ゼロの初心者でも 6 時間で始められる" href="http://www.php.cn/ja/course/1644.html">Python マスター Mosh、基礎知識ゼロの初心者でも 6 時間で始められる</a> <div class="wzrthreerb"> <div >21832 回の学習</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>最新のダウンロード</div> <a href="http://www.php.cn/ja/xiazai">詳細> </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">ウェブエフェクト <div></div></div> <div class="swiper-slide" data-id="twof">公式サイト<div></div></div> <div class="swiper-slide" data-id="threef">サイト素材<div></div></div> <div class="swiper-slide" data-id="fourf">フロントエンドテンプレート<div></div></div> </div> <ul class="onef"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="jQuery エンタープライズ メッセージ フォームの連絡先コード" href="http://www.php.cn/ja/toolset/js-special-effects/8071">[フォームボタン] jQuery エンタープライズ メッセージ フォームの連絡先コード</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="HTML5 MP3 オルゴール再生効果" href="http://www.php.cn/ja/toolset/js-special-effects/8070">[プレイヤーの特殊効果] HTML5 MP3 オルゴール再生効果</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="HTML5 クールなパーティクル アニメーション ナビゲーション メニューの特殊効果" href="http://www.php.cn/ja/toolset/js-special-effects/8069">[メニューナビゲーション] HTML5 クールなパーティクル アニメーション ナビゲーション メニューの特殊効果</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="jQuery ビジュアル フォームのドラッグ アンド ドロップ編集コード" href="http://www.php.cn/ja/toolset/js-special-effects/8068">[フォームボタン] jQuery ビジュアル フォームのドラッグ アンド ドロップ編集コード</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="VUE.JS 模倣 Kugou 音楽プレーヤー コード" href="http://www.php.cn/ja/toolset/js-special-effects/8067">[プレイヤーの特殊効果] VUE.JS 模倣 Kugou 音楽プレーヤー コード</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="古典的な HTML5 プッシュ ボックス ゲーム" href="http://www.php.cn/ja/toolset/js-special-effects/8066">[html5特殊効果] 古典的な HTML5 プッシュ ボックス ゲーム</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="画像効果を追加または削減するための jQuery スクロール" href="http://www.php.cn/ja/toolset/js-special-effects/8065">[画像の特殊効果] 画像効果を追加または削減するための jQuery スクロール</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="CSS3 個人アルバム カバー ホバー ズーム効果" href="http://www.php.cn/ja/toolset/js-special-effects/8064">[フォトアルバム効果] CSS3 個人アルバム カバー ホバー ズーム効果</a> </div> </li> </ul> <ul class="twof" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ja/toolset/website-source-code/8328" title="室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート" target="_blank">[フロントエンドテンプレート] 室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ja/toolset/website-source-code/8327" title="フレッシュカラーの個人履歴書ガイドページテンプレート" target="_blank">[フロントエンドテンプレート] フレッシュカラーの個人履歴書ガイドページテンプレート</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ja/toolset/website-source-code/8326" title="デザイナーのクリエイティブな仕事の履歴書 Web テンプレート" target="_blank">[フロントエンドテンプレート] デザイナーのクリエイティブな仕事の履歴書 Web テンプレート</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ja/toolset/website-source-code/8325" title="現代のエンジニアリング建設会社のウェブサイトのテンプレート" target="_blank">[フロントエンドテンプレート] 現代のエンジニアリング建設会社のウェブサイトのテンプレート</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ja/toolset/website-source-code/8324" title="教育サービス機関向けのレスポンシブ HTML5 テンプレート" target="_blank">[フロントエンドテンプレート] 教育サービス機関向けのレスポンシブ HTML5 テンプレート</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ja/toolset/website-source-code/8323" title="オンライン電子書籍ストア モールのウェブサイト テンプレート" target="_blank">[フロントエンドテンプレート] オンライン電子書籍ストア モールのウェブサイト テンプレート</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ja/toolset/website-source-code/8322" title="IT テクノロジーがインターネット企業の Web サイト テンプレートを解決します" target="_blank">[フロントエンドテンプレート] IT テクノロジーがインターネット企業の Web サイト テンプレートを解決します</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ja/toolset/website-source-code/8321" title="パープルスタイル外国為替取引サービスウェブサイトテンプレート" target="_blank">[フロントエンドテンプレート] パープルスタイル外国為替取引サービスウェブサイトテンプレート</a> </div> </li> </ul> <ul class="threef" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ja/toolset/website-materials/3078" target="_blank" title="かわいい夏の要素のベクター素材 (EPS+PNG)">[PNG素材] かわいい夏の要素のベクター素材 (EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ja/toolset/website-materials/3077" target="_blank" title="4 つの赤い 2023 卒業バッジ ベクター素材 (AI+EPS+PNG)">[PNG素材] 4 つの赤い 2023 卒業バッジ ベクター素材 (AI+EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ja/toolset/website-materials/3076" target="_blank" title="歌う鳥と花がいっぱいのカートデザイン春のバナーベクター素材(AI+EPS)">[バナー画像] 歌う鳥と花がいっぱいのカートデザイン春のバナーベクター素材(AI+EPS)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ja/toolset/website-materials/3075" target="_blank" title="金色の卒業帽ベクター素材(EPS+PNG)">[PNG素材] 金色の卒業帽ベクター素材(EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ja/toolset/website-materials/3074" target="_blank" title="黒と白のスタイルの山アイコン ベクター素材 (EPS+PNG)">[PNG素材] 黒と白のスタイルの山アイコン ベクター素材 (EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ja/toolset/website-materials/3073" target="_blank" title="異なる色のマントと異なるポーズを持つスーパーヒーローのシルエットベクター素材(EPS+PNG)">[PNG素材] 異なる色のマントと異なるポーズを持つスーパーヒーローのシルエットベクター素材(EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ja/toolset/website-materials/3072" target="_blank" title="フラット スタイルの植樹祭バナー ベクター素材 (AI+EPS)">[バナー画像] フラット スタイルの植樹祭バナー ベクター素材 (AI+EPS)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ja/toolset/website-materials/3071" target="_blank" title="9つのコミックスタイルの爆発するチャットバブルベクター素材(EPS+PNG)">[PNG素材] 9つのコミックスタイルの爆発するチャットバブルベクター素材(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="http://www.php.cn/ja/toolset/website-source-code/8328" target="_blank" title="室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート">[フロントエンドテンプレート] 室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ja/toolset/website-source-code/8327" target="_blank" title="フレッシュカラーの個人履歴書ガイドページテンプレート">[フロントエンドテンプレート] フレッシュカラーの個人履歴書ガイドページテンプレート</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ja/toolset/website-source-code/8326" target="_blank" title="デザイナーのクリエイティブな仕事の履歴書 Web テンプレート">[フロントエンドテンプレート] デザイナーのクリエイティブな仕事の履歴書 Web テンプレート</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ja/toolset/website-source-code/8325" target="_blank" title="現代のエンジニアリング建設会社のウェブサイトのテンプレート">[フロントエンドテンプレート] 現代のエンジニアリング建設会社のウェブサイトのテンプレート</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ja/toolset/website-source-code/8324" target="_blank" title="教育サービス機関向けのレスポンシブ HTML5 テンプレート">[フロントエンドテンプレート] 教育サービス機関向けのレスポンシブ HTML5 テンプレート</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ja/toolset/website-source-code/8323" target="_blank" title="オンライン電子書籍ストア モールのウェブサイト テンプレート">[フロントエンドテンプレート] オンライン電子書籍ストア モールのウェブサイト テンプレート</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ja/toolset/website-source-code/8322" target="_blank" title="IT テクノロジーがインターネット企業の Web サイト テンプレートを解決します">[フロントエンドテンプレート] IT テクノロジーがインターネット企業の Web サイト テンプレートを解決します</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ja/toolset/website-source-code/8321" target="_blank" title="パープルスタイル外国為替取引サービスウェブサイトテンプレート">[フロントエンドテンプレート] パープルスタイル外国為替取引サービスウェブサイトテンプレート</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>福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!</p> </div> <div class="footermid"> <a href="http://www.php.cn/ja/about/us.html">私たちについて</a> <a href="http://www.php.cn/ja/about/disclaimer.html">免責事項</a> <a href="http://www.php.cn/ja/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?1731624301"></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>