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

参考
ttp://perltips.twinkle.cc/ajax/dom_getelementsbytagname.php

<books>
    <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>
</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
    }
  }
}