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

まずは以下のような XML データを考える。
<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
    }
  }
}
トラックバック URL: https://perltips.twinkle.cc/trackback/158
Posted on 2006-12-28 by yas |
AJAX で、動的にテーブルを作る方法(初級)
Trackback from Perl Tips: AJAX でサーバから XML データを読み込んでそこからテーブルを作る。今回......
Posted by Perl Tips (未認証ユーザ) on 2007/01/01(月) 10:55
AJAX で、動的にテーブルを作る方法(中・上級)
Trackback from Perl Tips: 先のエントリーAJAX で、動的にテーブルを作る方法(初級)では、感じをつかむ......
Posted by Perl Tips (未認証ユーザ) on 2007/01/01(月) 10:56