jQueryの$.get()でXMLを操作する

公開日: カテゴリー: JavaScript タグ: 、

個人的にはjQueryを利用して新規のAjax処理を作る場合はJSONを使うのがほとんどですが、「RSSフィードを利用してあれこれしたい」とか「既存のサービスでも利用してるXMLで連携してどうこう」とか、X(HT)MLを連携に使いたい場合もまだまだ多いと思います。

が、普段JSONを利用してると「受信してきたX(HT)MLのDOMをどう操作するんだっけ?」と思い出せなくなることもあるので、備忘録としてまとめておきます。

結論からいくと、

  var title = $('#anyElement>title', domObj).text();

のようにjQuery()の第2引数に操作したいDOMオブジェクトを指定することで実現できます。

サンプルとして、RSS2.0フィードを$.getで受信して記事のタイトルと概要を一覧にしてみます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>$.get()でXMLを操作する&#064;UCWD-Studio.</title>
</head>
<body>
<div><input type="button" id="get" value="getRSS2.0" /></div>
<div id="viewer"></div>
<script type="text/javascript" src="https://ucwd.jp/wp-includes/js/jquery/jquery.js"></script>
<script type="text/javascript">
$( function () {
    $('#get').click( function () {
        $.get(
            'https://ucwd.jp/feed',
            function (res) {
                $('#viewer').html('<dl id="resResult"></dl>');
                $('item', res).each(function (i) {
                    var title = $('item>title',       res).eq(i);
                    var link  = $('item>link',        res).eq(i);
                    var desc  = $('item>description', res).eq(i);

                    $('#resResult').append(
                        '<dt><a>' + title.text() + '</a></dt>'
                          + '<dd>' + desc.text() + '</dd>'
                    );
                    $('#resResult>dt>a').eq(i).attr('href', link.text());
                });
            }
        );
    });
});
</script>
</body>
</html>

RSSフィードのDOM操作で気にしてすべき点は、単純に

var title = $('title', res).text();

でテキストノードを取得するとchannel > title要素の内容を含めた全てのtitle要素を拾ってきてしまうので、とりあえず親要素のitemの数だけeachで繰り返しつつ、何個目のitem > title要素を取得するのかを指定しながら処理します。

オライリージャパンのjQueryクックブックにも書かれてる内容ではあるのですけど、一応サンプルコードの実行例を確認できるページも用意したので、合わせて確認してみてください。