XMLのツリー構造の解析とDOM文書オブジェクトモデル
ツリー構造
XML文書は常に記述的である。XMLツリーと呼ばれる木構造は、XML文書を記述する上で重要な役割を担っている。
このツリー構造には、ルート(親)要素、子要素などが含まれる。木構造を利用することで、ルート要素を起点とした後続の枝や副枝をすべて把握することができる。解析はルート要素から始まり、ある要素を指す最初の枝に移動し、そこから最初の枝とその子要素が処理される。
例
次の例は、単純なXMLツリー構造を示しています。
- <? xml バージョン = "1.0"。 ?
- <スパン <スパン < 会社概要 >
- <スパン <スパン < 社員紹介 >
- <スパン <スパン < 名前 > タンマイ </ 名前 >
- <スパン <スパン < 姓名 > パティル <スパン </ 姓名 >
- <スパン <スパン < 連絡先 > 1234567890 </ 連絡先 >
- <スパン <スパン < メール <スパン > [email protected] </ 電子メール <スパン > <スパン
- <スパン <スパン < 所在地 をご覧ください。
- <スパン <スパン < 都市名 > バンガロール </ 都市名 >
- <スパン <スパン < 状態 > カルナータカ州 </ 状態 >
- <スパン <スパン < ジップ > 560212 </ ジップ >
- <スパン <スパン </ 所在地 をご覧ください。
- <スパン <スパン </ 社員紹介 >
- <スパン <スパン </ 会社概要 <スパン >
上記のXML文書を以下のようなツリー構造で表現しています。
図では、<company>というルートエレメントがあります。その中に、もう一つ<Employee>という要素があります。Employee要素の中には、 <FirstName>, <LastName>, <ContactNo>, <Email>, <Address> という5つのブランチがあります。Address>要素内には、さらに3つのサブブランチ、すなわち <City>, <State> and <Zip> があります。
DOM Document Object Model(ドキュメントオブジェクトモデル
DOM(Document Object Model)は、XMLの基礎となるものです。XML文書はノードと呼ばれる階層的な情報単位を持ち、DOMはこれらのノードとノード間の関係を記述する方法である。
DOM ドキュメントは、ノードまたは情報のかたまりを階層的に整理したものです。この階層構造により、開発者はこのノードツリーをナビゲートして、特定の情報を照会することができます。DOM は情報の階層構造に基づいているため、_node-tree-based_ とも呼ばれます。
一方、XML DOMは、開発者がアプリケーションを作成するために、ノードツリーの任意の位置にノードを追加、編集、移動、削除するためのAPIも提供している。
例
次の例(sample.htm)では、XML文書("address.xml")を解析してXML DOMオブジェクトに変換し、JavaScriptで情報を取り出しています。
- <スパン <!DOCTYPE html >
- <スパン <スパン < html >
- <スパン <スパン < 本体 >
- <スパン <スパン < h1 > TutorialsPoint DOMの例 </ h1 >
- <スパン <スパン < ディブ >
- <スパン <スパン < b > 名前 <スパン </ b > <スパン < スパン <スパン イド = "name"。 > <スパン </ スパン <スパン > < ブラン >
- <スパン <スパン < b > 会社 <スパン </ b > <スパン < スパン <スパン イド = "company"。 > <スパン </ スパン <スパン > < ブラン >
- <スパン <スパン < b > 電話番号 </ b > <スパン < スパン <スパン イド = "phone"。 <スパン > <スパン </ スパン <スパン >
- <スパン <スパン </ ディブ >
- <スパン <スパン < スクリプト >
- if (window.XMLHttpRequest) {/// code for IE7+, Firefox, Chrome, Opera, Safari
- xmlhttp = <スパン 新しい XMLHttpRequest()を使用します。
- } else {// IE6, IE5 用のコード
- xmlhttp = <スパン 新しい ActiveXObject("Microsoft.XMLHTTP") を使用します。
- }
- xmlhttp.open("GET","/xml/address.xml",false);
- xmlhttp.send()を実行します。
- xmlDoc = xmlhttp .responseXML。
- document.getElementById("name")です。 .innerHTML =
- <スパン xmlDoc .getElementsByTagName("name")[0].childNodes[0].nodeValue;
- document.getElementById("company") .innerHTML =
- <スパン xmlDoc .getElementsByTagName("company")[0].childNodes[0].nodeValue;
- document.getElementById("phone")です。 .innerHTML =
- <スパン xmlDoc .getElementsByTagName("phone")[0].childNodes[0].nodeValue;
- <スパン </ スクリプト >
- <スパン <スパン </ 本体
- <スパン <スパン </ html >
address.xmlの内容は、以下の通りです。
- <? xml バージョン = "1.0"。 ?
- <スパン <スパン < コンタクトインフォ >
- <スパン <スパン < 名称 > タンメイ・パティル </ 名称 >
- <スパン <スパン < 会社 > チュートリアルポイント </ 会社 >
- <スパン <スパン < 電話 > (011) 123-4567 <スパン </ 電話 >
- <スパン <スパン </ コンタクトインフォ >
sample.htmとaddress.xmlの2つのファイルを同じディレクトリ/xmlに保存し、sample.htmファイルをブラウザで開いて実行すればよいのです。次のような結果が得られるはずです。
ここでは、各子ノードを抽出して、その値を表示していることがわかります。
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン