Ajax XMLドキュメントツリーの読み方。

Ajax ではWebページを動的に書き換えたり、非同期通信でXML形式などのデータを取得したりしますが、それにはDOMの知識が欠かせません。

DOM(ドム:Document Object Model)

DOMとはHTMLやXMLの内容と配置をツリー構造のオブジェクトとして扱い、プログラミング言語を使って制御するための仕組みです。

HTMLタグやXMLタグで記述したドキュメントは、ツリー構造として表現できます。DOMを使うとHTMLやXMLの各要素を特定することができます。またDOMには様々なメソッドやプロパティが用意されていて、特定した要素はプログラム中でいろんな操作が行なえるようになります。

・要素を特定する
・要素のデータを取得する
・新たな要素を生成する
・要素を削除する
・スタイルを変更する など

まずはXMLのツリー構造の読み方について説明します。この読み方がわかれば、DOMについて理解することができます。基本は「開始タグ」と「終了タグ」です。各要素は重箱のように入れ子になっています。そこに注意して読み進めてください。


【1】以下のURLをクリックし、RSSフィードを表示します。

http://search.goo.ne.jp/rss/newkw.rdf

ajax-263.gif


【2】「rdf:RDF」が最上位(ルート)の階層になっています。

ajax-264.gif

「rdf:RDF」の終了タグは最後にあります。つまり他の要素は全て rdf:RDF の内側に含まれています。


【3】rdf:RDF の左側にある「-」をクリックします。

ajax-265.gif


【4】rdf:RDF が閉じられました。

ajax-266.gif


【5】rdf:RDF の左側にある「+」をクリックすると、元通り展開されます。

ajax-267.gif

このように開いたり閉じたりすることで、各要素の関係が掴めます。


【6】今度は channel の左側にある「-」をクリックします。

ajax-268.gif


【7】channel が閉じられました。

ajax-269.gif

表示されなくなった title、link、description、dc:language、items が channel の内側に含まれていることがわかりましたね。

*この時 channel を「親ノード」、内側の要素を「子ノード」といいます。


【8】次は item に注目してください。

ajax-270.gif

item の中には title、link、dc:date が含まれていますね。これから作る簡易RSSリーダーではこれらの値を取得します。


【9】item の開始タグをよく見ると、どこまでがタグ名かわかり難いですよね。

ajax-271.gif


【10】そんな時は、終了タグのほうを見るのがコツです。

ajax-272.gif

「item」がタグ名だということがすぐにわかります。

ちなみに「rdf:about」は属性名です。属性値も取得できます。XMLを作る時に子ノードにするか、属性にするかは自由に決められます。

今回はXMLの階層ツリーについての読み方でした。これは非同期通信でデータを取得する時に必要になります。

またHTMLの要素も階層ツリーで表せますが、これは動的にページを書き換える時に必要になります。HTMLの場合についてはまたの機会に解説します。


スポンサード リンク

スポンサード リンク






Ajax初心者入門講座TOPへ