XMLDOMチュートリアル
XML DOM
DOMとは何ですか？
DOMは、ドキュメントにアクセスして操作するための標準を定義しています。
HTML DOMは、HTMLドキュメントにアクセスして操作するための標準的な方法を定義します。HTMLドキュメントをツリー構造として表示します。
XML DOMは、XMLドキュメントにアクセスして操作するための標準的な方法を定義します。XMLドキュメントをツリー構造として表示します。
DOMを理解することは、HTMLまたはXMLを使用するすべての人にとって必須です。
HTML DOM
すべてのHTML要素には、HTMLDOMを介してアクセスできます。
この例では、id = "demo"のHTML要素の値を変更します。
例
<h1 id="demo">This is a Heading</h1>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>
この例では、HTMLドキュメントの最初の<h1>要素の値を変更します。
例
<h1>This is a Heading</h1>
<h1>This is a Heading</h1>
<script>
document.getElementsByTagName("h1")[0].innerHTML = "Hello World!";
</script>
注： HTMLドキュメントに<h1>要素が1つしかない場合でも、getElementsByTagName（）メソッドは常に配列を返すため、配列インデックス[0]を指定する必要があります。
HTML DOMについては、 JavaScriptチュートリアル でさらに詳しく知ることができます。
XML DOM
すべてのXML要素には、XMLDOMを介してアクセスできます。
XMLDOMは次のとおりです。
- XMLの標準オブジェクトモデル
- XMLの標準プログラミングインターフェイス
- プラットフォームおよび言語に依存しない
- W3C標準
言い換えると、XML DOMは、XML要素を取得、変更、追加、または削除する方法の標準です。
XML要素の値を取得する
このコードは、XMLドキュメントの最初の<title>要素のテキスト値を取得します。
例
txt = xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
XMLファイルのロード
以下の例で使用されているXMLファイルはbooks.xmlです。
この例では、「books.xml」をxmlDocに読み込み、books.xmlの最初の<title>要素のテキスト値を取得します。
例
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("GET", "books.xml", true);
xhttp.send();
function myFunction(xml) {
var xmlDoc = xml.responseXML;
document.getElementById("demo").innerHTML =
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
}
</script>
</body>
</html>
例の説明
- xmlDoc-パーサーによって作成されたXMLDOMオブジェクト。
- getElementsByTagName（ "title"）[0] -最初の<title>要素を取得します
- childNodes [0] -<title>要素の最初の子（テキストノード）
- nodeValue-ノードの値（テキスト自体）
XML文字列のロード
この例では、テキスト文字列をXML DOMオブジェクトにロードし、JavaScriptを使用してそこから情報を抽出します。
例
<html>
<body>
<p id="demo"></p>
<script>
var text, parser,
xmlDoc;
text = "<bookstore><book>" +
"<title>Everyday
Italian</title>" +
"<author>Giada De Laurentiis</author>" +
"<year>2005</year>" +
"</book></bookstore>";
parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");
document.getElementById("demo").innerHTML =
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
</script>
</body>
</html>
プログラミングインターフェース
DOMは、XMLをノードオブジェクトのセットとしてモデル化します。ノードには、JavaScriptまたは他のプログラミング言語でアクセスできます。このチュートリアルでは、JavaScriptを使用します。
DOMへのプログラミングインターフェイスは、設定された標準のプロパティとメソッドによって定義されます。
プロパティは、あるものと呼ばれることがよくあります（つまり、ノード名は「本」です）。
メソッドは、実行されるものと呼ばれることがよくあります（つまり、「本」を削除します）。
XMLDOMプロパティ
これらはいくつかの典型的なDOMプロパティです：
- x.nodeName-xの名前
- x.nodeValue-xの値
- x.parentNode-xの親ノード
- x.childNodes-xの子ノード
- x.attributes-xの属性ノード
注：上記のリストでは、xはノードオブジェクトです。
XMLDOMメソッド
- x.getElementsByTagName（name）-指定されたタグ名を持つすべての要素を取得します
- x.appendChild（node）-子ノードをxに挿入します
- x.removeChild（node）-xから子ノードを削除します
注：上記のリストでは、xはノードオブジェクトです。