XML DOM
XML の基礎はドキュメント オブジェクト モデル (DOM) です。DOM ドキュメントは、階層的に編成されたノードまたは情報ブロックのセットであり、開発者はナビゲーション ツリーで特定の情報を見つけることができます。
DOM (Document Object Model) は、ドキュメントにアクセスして操作するための標準メソッドを定義します。
XML DOM
XML DOM (XML Document Object Model) は、XML ドキュメントにアクセスして操作するための標準メソッドを定義します。
XML DOM は、XML ドキュメントをツリー構造として表示します。
すべての要素には DOM ツリーを通じてアクセスできます。それらの内容は変更または削除でき、新しい要素を作成できます。要素、そのテキスト、およびその属性はすべてノードとみなされます。
XML DOM について詳しくは、XML DOM チュートリアルをご覧ください。
HTML DOM
HTML DOM は、HTML ドキュメントにアクセスして操作するための標準メソッドを定義します。
すべての HTML 要素には、HTML DOM を通じてアクセスできます。
HTML DOM について詳しくは、HTML DOM チュートリアルをご覧ください。 。
XML ファイルのロード - クロスブラウザーの例
次の例では、XML ドキュメント (「note.xml」) を解析して XML DOM オブジェクトにし、JavaScript を介していくつかの情報を抽出します。
例
<html><body><h1>W3Cschools 内部メモ</h1><div><b>宛先:</b> <span id="to"></span><br /><b>差出人:< /b> <span id="from"></span><br /><b>メッセージ:</b> <span id="message"></span></div><script>if (ウィンドウ.XMLHttpRequest){// コードIE7 以降、Firefox、Chrome、Opera、Safarixmlhttp=new XMLHttpRequest();}else{// IE6、IE5xmlhttp=new のコードActiveXObject("Microsoft.XMLHTTP");}xmlhttp.open("GET","note.xml",false);xmlhttp.send();xmlDoc=xmlhttp.responseXM L;document.getElementById("to").innerHTML=xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue;document.g etElementById("from").innerHTML=xmlDoc.getElementsByTagName("from")[0].childNodes[0].nodeValue;document.getElemen tById("メッセージ").innerHTML=xmlDoc.getElementsByTagName("body")[0].childNodes[0].nodeValue;</script></body></html>試してみる »重要な注意事項!
上記の XML ファイル (「note.xml」) の <to> 要素からテキスト「Tove」を抽出する構文は次のとおりです。
getElementsByTagName("to")[0].childNodes[0].nodeValueXML ファイルに <to> 要素が 1 つだけ含まれている場合でも、配列インデックス [0] を指定する必要があることに注意してください。これは、getElementsByTagName() メソッドが配列を返すためです。
XML 文字列のロード - クロスブラウザーの例
次の例では、XML 文字列を XML DOM オブジェクトに解析し、JavaScript を介して情報を抽出します。
例
<html><body><h1>W3Cschools 内部メモ</h1><div><b>宛先:</b> <span id="to"></span><br /><b>差出人:< /b> <span id="from"></span><br /><b>メッセージ:</b> <span id="メッセージ"></span></div><script>txt="<note>";txt=txt+"<to>トーベ</to>";txt=txt+"<from>ジャニ</from >";txt=txt+"<Heading>リマインダー</Heading>";txt=txt+"<body>これを忘れないでください週末!</body>";txt=txt+"</note>";if (window.DOMParser){parser=new DOMParser();xmlDoc=parser.parseFromString(txt,"text/xml");}else / /Internet Explorer{xmlDoc=new ActiveXObject("Microsoft.XMLDOM");xmlDoc.async=false;xmlDoc.loadXML(txt);}document.getElementById("to").innerHTML=xmlDoc.getElementsByTagName("to")[0].childNodes[0] .nodeValue;document.getElementById("から" ).innerHTML=xmlDoc.getElementsByTagName("from")[0].childNodes[0].nodeValue;document.getElementById("message").innerHTML=xmlDoc.getElementsByTagName("body")[0].childNodes[0] .nodeValue;</script></body></html>試してみましょう »
次のセクションでは、HTML ページに XML データを表示する方法を学習します。