XML DOM の詳細
XML DOM - 高度な
このチュートリアルの前の章では、XML DOM を紹介し、XML DOM の getElementsByTagName() メソッドを使用して XML ドキュメントからデータを取得しました。
この章では、他の重要な XML DOM メソッドをいくつか組み合わせます。
XML DOM について詳しくは、XML DOM チュートリアルをご覧ください。
要素の値を取得します。
以下の例で使用されている XML ファイル:books.xml。
次の例は、最初の <title> 要素のテキスト値を取得します:
Instance
<!DOCTYPE html>
<html>
<body>
<script>
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","books.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
txt=xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
document.write(txt);
</script>
</body>
</html>インスタンスの実行»
オンラインの例を表示するには、[インスタンスの実行] ボタンをクリックします
属性を取得する
次の例は、最初の <title> 要素の "lang" 属性のテキスト値を取得します。 「インスタンスの実行」ボタンをクリックして、オンライン例を表示します
<!DOCTYPE html>
<html>
<body>
<script>
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","books.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
txt=xmlDoc.getElementsByTagName("title")[0].getAttribute("lang");
document.write(txt);
</script>
</body>
</html>Run例»
[例の実行] ボタンをクリックしてオンライン例を表示します
新しい属性を作成します XML DOM の setAttribute() メソッドを使用して、既存の属性値を変更したり、新しい属性を作成したりできます。
次の例では、新しい属性 (edition="first") を作成し、それを各 <book> 要素に追加します。オンラインの例を見る
次の例では、新しい属性 (edition="first") を作成し、それを各 <book> 要素に追加します。オンラインの例を見る
XML DOM の createElement() メソッドは、新しい要素ノードを作成します。
XML DOM の createTextNode() メソッドは、新しいテキスト ノードを作成します。
XML DOM の appendChild() メソッドは、子ノードをノード (最後の子ノードの後に) に追加します。
テキスト コンテンツを含む新しい要素を作成する必要がある場合は、新しい要素ノードと新しいテキスト ノードを同時に作成し、それを既存のノードに追加する必要があります。 次の例では、次のテキストを含む新しい要素 (<edition>) を作成し、それを最初の <book> 要素に追加します。
次の例では、次のテキストを含む新しい要素 (<edition>) を作成し、それを最初の <book> 要素に追加します。
サンプルの実行»
「サンプルの実行」ボタンをクリックしてオンラインサンプルを表示します
サンプルの説明
<edition> 要素を作成します
値を含むテキストノードを作成します"First" の
- このテキスト ノードを新しい <edition> 要素に追加します
- <edition> 要素を最初の <book> に追加します インスタンス
<!DOCTYPE html>
<html>
<body>
<script>
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","books.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
x=xmlDoc.getElementsByTagName("title")[0].childNodes[0];
x.nodeValue="Easy Cooking";
x=xmlDoc.getElementsByTagName("title")[0].childNodes[0];
txt=x.nodeValue;
document.write(txt);
</script>
</body>
</html>インスタンスの実行»オンラインインスタンスを表示するには、「インスタンスの実行」ボタンをクリックしてください
注:上記の例の結果は、使用されているブラウザによって異なる場合があります。 Firefox は改行文字を空のテキスト ノードとして扱いますが、Internet Explorer は扱いません。この問題とその回避方法の詳細については、XML DOM チュートリアルを参照してください。
注:上記の例の結果は、使用されているブラウザによって異なる場合があります。 Firefox は改行文字を空のテキスト ノードとして扱いますが、Internet Explorer は扱いません。この問題とその回避方法の詳細については、XML DOM チュートリアルを参照してください。
