AJAX で、getElementsByTagName で DOM にアクセスする

まずは以下のような XML データを考える。 

<book>
    <title>初めての AJAX</title>
    <author>AJAX 編集部</author>
    <publisher>AJAX 社</publisher>
</book>
<book>
    <title>初めての Perl</title>
    <author>Perl 編集部</author>
    <publisher>Perl 出版</publisher>
</book>
<book>
    <title>初めての PHP</title>
    <author>PHP 編集部</author>
    <publisher>PHP 工房</publisher>
</book>

最終的に値を取り出したいわけだが、childNodes.item(0) ＝ childNodes[0] ＝ firstChild は同じ意味であることを知っておくとよいと思う。

function parse(xml) { if(xml) { 
if(xml.documentElement) { // for IE
  var books = xml.documentElement.getElementsByTagName('book');
  for (var i = 0; i < books.length; i++) {

    // 以下の各行はすべて同じ意味。
    // childNodes.item(0) ＝ childNodes[0] ＝ firstChild は同じ意味。
    // childNode[0] と firstChild はのどちらを使ってもよい。

    // 方法 1
    var title =
      tags.item(i).getElementsByTagName('title').item(0).childNodes.item(0).nodeValue;

    // 方法 2
// var title = // tags[i].getElementsByTagName('title')[0].childNodes[0].nodeValue; 
    // 方法 3
// var title = // tags[i].getElementsByTagName('title')[0].firstChild.nodeValue; 
    // 方法 4
    // あとは方法1～3を参考に組み合わせてみてください。

  } // End of for
}
} }

上のコードと下のコードは同じ。上は book から攻める。下は title からよりダイレクトに攻める。

function parse(xml) { if(xml) { 
if(xml.documentElement) { // for IE
  var titles = xml.documentElement.getElementsByTagName('title');
  for (var i = 0; i < titles.length; i++) {

    // 方法 1
    var name = tags.item(0).firstChild.nodeValue;

    // 方法 2
// var name = tags[i].childNodes[0].nodeValue; 
    // 方法 3
// var name = tags[i].firstChild.nodeValue; 
    // 方法 4
    // あとは方法1～3を参考に組み合わせてみてください。

  } // End of for
}
} }

admin

Tags

Comments