DOMは、文書にアクセスして操作するための標準を定義します。
XMLのDOMは、ツリー構造としてXML文書を提示します。
HTML DOMは、ツリー構造としてHTML文書を提示します。
DOMを理解することは、HTMLやXMLを扱う人には必要不可欠です。
XML DOMツリーの例
DOMとは何ですか？
DOMは、XMLやHTMLなどのドキュメントにアクセスするための標準を定義しています。
"The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."
DOMは、3つの異なる部品/レベルに分かれています。
- Core DOM -任意の構造化文書のための標準モデル
- XML DOM - XML文書の標準モデル
- HTML DOM - HTML文書のための標準モデル
DOMは、定義objects and propertiesすべてのドキュメント要素、およびのmethods (interface)にアクセスします。
HTML DOM
HTML DOMは、HTMLドキュメントにアクセスして操作するための標準的な方法を定義します。
すべてのHTMLエレメントは、HTML DOMを介してアクセスすることができます。
HTML DOMは定義されobjects, properties and methodsのすべてのHTML要素のを。
HTML要素の値を変更します
この例では、ID = "デモ"でHTML要素の値を変更します。
例
<h1 id="demo">This is a Heading</h1>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script> »それを自分で試してみてください この例では、最初の値に変更<h1> HTMLドキュメント内の要素を：
例
<h1>This is a Heading</h1>
<h1>This is a Heading</h1>
<script>
document.getElementsByTagName("h1")[0].innerHTML = "Hello World!";
</script> »それを自分で試してみてください 注：でも、HTMLドキュメントのcontainesのみONE場合<h1>あなたはまだので、[0]配列のインデックスを指定する必要が要素getElementsByTagName()メソッドは常に配列を返します。
あなたは私たちのHTML DOMについてもっとたくさん学ぶことができるJavaScriptのチュートリアルを 。
XMLのDOM
XMLのDOMは、XML文書にアクセスして操作するための標準的な方法を定義します。
すべてのXML要素は、XML DOMを介してアクセスすることができます。
XMLのDOMを定義しobjects, properties and methodsすべてのXML要素のを。
XMLのDOMは、次のとおりです。
- XMLのための標準的なオブジェクト・モデル
- XMLの標準プログラミング・インターフェース
- プラットフォームや言語に依存しません
- W3C標準
言い換えれば、 The XML DOM is a standard for how to get, change, add, or delete XML elements.
XML要素の値を取得します。
このコードは、最初のテキスト値取得<title> XML文書内の要素を：
例
txt = xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
XMLファイルのロード
以下の例で使用されるXMLファイルですbooks.xmlという 。
この例では、読み込み"books.xml" XMLDOCへと最初のテキスト値取得<title>のBooks.xml内の要素を：
例
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
myFunction(xhttp);
}
};
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 -パーサーによって作成されたXML DOMオブジェクト。
- getElementsByTagName("title")[0] -最初の取得<title>要素を
- childNodes[0] -の最初の子<title>要素（テキストノード）
- nodeValue -ノードの値(the text itself)
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へのプログラミング・インタフェースを設定し、標準的なプロパティとメソッドによって定義されます。
Properties多くの場合（すなわち、ノード名「予約」されている）であるものと呼ばれます。
Methods 、多くの場合（すなわち「ブック」を削除）に行われるものと呼ばれています。
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はノードオブジェクトです。