DOM作成ノード
XML DOM ノードの作成
試してみる - 例
以下の例では、XML ファイル Books.xml を使用します。
外部 JavaScript にある関数loadXMLDoc()は、XML ファイルをロードするために使用されます。
要素ノードの作成
この例では、createElement() を使用して新しい要素ノードを作成し、appendChild() を使用してそれをノードに追加します。
createAttribute を使用して属性ノードを作成します
この例では、createAttribute() を使用して新しい属性ノードを作成し、setAttributeNode() を使用してそれを要素に挿入します。
setAttribute を使用して属性ノードを作成します
この例では、setAttribute() を使用して要素の新しい属性を作成します。
テキスト ノードの作成
この例では、createTextNode() を使用して新しいテキスト ノードを作成し、appendChild() を使用してそれを要素に追加します。
CDATA セクション ノードの作成
この例では、createCDATAsection() を使用して CDATA セクション ノードを作成し、appendChild() を使用してそれを要素に追加します。
コメント ノードを作成する
この例では、createComment() を使用してコメント ノードを作成し、appendChild() を使用してそれを要素に追加します。
新しい要素ノードを作成します
createElement() メソッドで新しい要素ノードを作成します:
Instance
<!DOCTYPE html>
<html>
<head>
<script src="loadxmldoc.js">
</script>
</head>
<body>
<script>
xmlDoc=loadXMLDoc("books.xml");
newel=xmlDoc.createElement("edition");
x=xmlDoc.getElementsByTagName("book")[0];
x.appendChild(newel);
document.write(x.getElementsByTagName("edition")[0].nodeName);
</script>
</body>
</html>インスタンスの実行»
オンラインの例を表示するには、[インスタンスの実行] ボタンをクリックします
インスタンスの説明:
loadXMLDoc()を使用して「books.xml」をxmlDocにロードします
新しい要素ノード<edition>を作成します
この要素ノードを最初の<book>要素に追加します
すべての <book> 要素に要素を追加します: 試してみてください
新しい属性ノードを作成します
createAttribute() を使用して新しい属性ノードを作成します:
Instance
<!DOCTYPE html>
<html>
<head>
<script src="loadxmldoc.js">
</script>
</head>
<body>
<script>
xmlDoc=loadXMLDoc("books.xml");
newatt=xmlDoc.createAttribute("edition");
newatt.nodeValue="first";
x=xmlDoc.getElementsByTagName("title");
x[0].setAttributeNode(newatt);
document.write("Edition: ");
document.write(x[0].getAttribute("edition"));
</script>
</body>
</html> インスタンスの実行»
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
例の説明:
loadXMLDoc()を使用して「books.xml」をxmlDocにロードします
新しい属性ノード「edition」を作成します
属性ノードの値を「first」に設定します
この新しい属性ノードを最初の <title> 要素に追加します
すべての <title> 要素を繰り返して、新しい属性ノードを追加します: 試してください
注: 属性がすでに存在する場合は、新しい属性に置き換えられます。
属性を作成するには setAttribute() を使用します
setAttribute() メソッドは属性が存在しない場合に新しい属性を作成できるため、このメソッドを使用して新しい属性を作成できます。
例
<!DOCTYPE html>
<html>
<head>
<script src="loadxmldoc.js">
</script>
</head>
<body>
<script>
xmlDoc=loadXMLDoc("books.xml");
x=xmlDoc.getElementsByTagName("title");
x[0].setAttribute("edition","first");
document.write("Edition: ");
document.write(x[0].getAttribute("edition"));
</script>
</body>
</html>例の実行»
「例の実行」ボタンをクリックしてオンライン例を表示します
例の説明:
loadXMLDoc()を使用して「books.xml」をロードしますxmlDoc に
最初の <book> 要素に値 "first" を設定 (作成) します
すべての <title> 要素をループして、新しい属性を追加します
テキストの作成 ノードの
createTextNode() メソッドは、新しいテキスト ノードを作成します:
インスタンス
<!DOCTYPE html>
<html>
<head>
<script src="loadxmldoc.js">
</script>
</head>
<body>
<script>
xmlDoc=loadXMLDoc("books.xml");
newel=xmlDoc.createElement("edition");
newtext=xmlDoc.createTextNode("first");
newel.appendChild(newtext);
x=xmlDoc.getElementsByTagName("book")[0];
x.appendChild(newel);
//Output title and edition
document.write(x.getElementsByTagName("title")[0].childNodes[0].nodeValue);
document.write(" - Edition: ");
document.write(x.getElementsByTagName("edition")[0].childNodes[0].nodeValue);
</script>
</body>
</html>実行例 »
[インスタンスの実行] ボタンをクリックしてオンライン例を表示します
インスタンスの説明:
loadXMLDoc()を使用する xmlDocに「books.xml」を読み込みます
新しい要素ノード<edition>を作成します
テキストが「最初」である新しいテキストノードを作成します
ここまで要素ノード 新しいテキスト ノードを追加します
最初の <book> 要素に新しい要素ノードを追加します
テキスト ノードを含む要素ノードをすべての <book> 要素に追加します
CDATA セクション ノード
createCDATASection() メソッドは、新しい CDATA セクション ノードを作成します。
インスタンス
<!DOCTYPE html>
<html>
<head>
<script src="loadxmldoc.js"></script>
</head>
<body>
<script>
xmlDoc=loadXMLDoc("books.xml");
newCDATA=xmlDoc.createCDATASection("Special Offer & Book Sale");
x=xmlDoc.getElementsByTagName("book")[0];
x.appendChild(newCDATA);
document.write(x.lastChild.nodeValue);
</script>
</body>
</html>インスタンスの実行 »
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
例の説明:
loadXMLDoc()を使用して「books.xml」をxmlDocにロードします
新しいCDATAセクションノードを作成します
この新しいセクションを最初の<book>要素に追加しますセクション ノード
はすべての <book> 要素に CDATA セクションを追加します: 試してみてください
コメント ノードの作成
createComment() メソッドは新しいコメント ノードを作成します。
例
<!DOCTYPE html>
<html>
<head>
<script src="loadxmldoc.js"></script>
</head>
<body>
<script>
xmlDoc=loadXMLDoc("books.xml");
newComment=xmlDoc.createComment("Revised April 2008");
x=xmlDoc.getElementsByTagName("book")[0];
x.appendChild(newComment);
document.write(x.lastChild.nodeValue);
</script>
</body>
</html>例の実行»
「例の実行」ボタンをクリックしてオンライン例を表示します
例の説明:
loadXMLDoc()を使用して「books.xml」をロードしますxmlDoc
に新しいコメント ノードを作成します - この新しいコメント ノードを最初の <book> 要素に追加します
- ループしてすべての <book> 要素にコメント ノードを追加します
