XML DOMチュートリアル

DOMとは何ですか？

DOMは、ドキュメントのアクセスと操作を標準化した定義を提供します：

「W3Cドキュメントオブジェクトモデル（DOM）は、プラットフォームや言語に関係なく、プログラムやスクリプトが動的にドキュメントの内容、構造、スタイルをアクセスおよび更新できるインターフェースです。」

HTML DOMは、HTMLドキュメントのアクセスと操作を標準化した方法を定義しています。それはHTMLドキュメントを木構造として表示します。

XML DOMは、XMLドキュメントのアクセスと操作を標準化した方法を定義しています。それはXMLドキュメントを木構造として表示します。

HTMLやXMLを使用するすべての人にとって、DOMの理解は必須です。

HTML DOM

すべてのHTML要素はHTML DOMを通じてアクセスできます。

例1

この例では、id="demo"のHTML要素の値を変更します：

<h1 id="demo">これはタイトル</h1>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>

自分で試してみてください

例2

この例では、HTMLドキュメント内の最初の<h1>要素の値を変更します：

<h1>これはタイトル</h1>
<h1>これはタイトル</h1>
<script>
document.getElementsByTagName("h1")[0].innerHTML = "Hello World!";
</script>

自分で試してみてください

注意：HTMLドキュメントが<h1>要素を1つだけ含んでいても、getElementsByTagName()メソッドが常に配列を返すため、配列インデックス[0]を指定する必要があります。

HTML DOMに関するより多くの情報をJavaScriptのチュートリアルで学ぶことができます。

XML DOM

すべてのXML要素はXML DOMを通じてアクセスできます。

XML DOMは：

  • 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>

自分で試してみてください

例の説明

  1. xmlDoc - 解析器によって作成されたXML DOMオブジェクト
  2. getElementsByTagName("title")[0] - 最初の<title>要素を取得
  3. childNodes[0] - <title>要素の最初の子ノード（テキストノード）
  4. nodeValue - ノードの値（テキスト自体）

XML文字列のロード

この例では、テキスト文字列をXML DOMオブジェクトにロードし、JavaScriptを使用して情報を抽出します：

例

<html>
<body>
<p id="demo"></p>
<script>
var text, parser, xmlDoc;
text = "<bookstore><book>" +
"<title>雅舍談食</title>" +
"<author>梁実秋</author>" +
"<year>2013</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のプログラミングインターフェースは、標準の属性とメソッドのセットで定義されています。

属性通常、何であるかを指します（例えばnodenameが「book」など）。

メソッド通常、何か行うことができることを指します（例えば「book」を削除するアクションなど）。

XML DOM属性

これらは典型的なDOM属性です：

  • x.nodeName - xの名前
  • x.nodeValue - xの値
  • x.parentNode - xの親ノード
  • x.childNodes - xの子ノード
  • x.attributes - xの属性ノード

注：上記のリストでは、x はノードオブジェクトです。

XML DOM メソッド

  • x.getElementsByTagName(name) - 指定されたタグ名を持つすべての要素を取得
  • x.appendChild(node) - xに子ノードを挿入
  • x.removeChild(node) - xから子ノードを削除

注：上記のリストでは、x ノードオブジェクトです。