DOM 削除ノード
XML DOM ノードの削除
removeChild() メソッドは、指定されたノードを削除します。
removeAttribute() メソッドは、指定された属性を削除します。
試してみる - 例
以下の例では、XML ファイル Books.xml を使用します。
外部 JavaScript にある関数loadXMLDoc()は、XML ファイルをロードするために使用されます。
要素ノードの削除
この例では、removeChild() を使用して最初の <book> 要素を削除します。
現在の要素ノードを削除します
この例では、parentNode とremoveChild() を使用して、現在の <book> 要素を削除します。
テキスト ノードの削除
この例では、removeChild() を使用して、最初の <title> 要素のテキスト ノードを削除します。
テキスト ノードのテキストをクリアする
この例では、nodeValue() 属性を使用して、最初の <title> 要素のテキスト ノードをクリアします。
名前で属性を削除する
この例では、removeAttribute() を使用して、最初の <book> 要素から「category」属性を削除します。
オブジェクトに基づいて属性を削除する
この例では、removeAttributeNode() を使用して、すべての <book> 要素からすべての属性を削除します。
要素ノードの削除
removeChild()メソッドは、指定されたノードを削除します。
ノードが削除されると、そのすべての子ノードも削除されます。
次のコード スニペットは、読み込まれた xml から最初の <book> 要素を削除します:
インスタンス
<!DOCTYPE html>
<html>
<head>
<script src="loadxmldoc.js">
</script>
</head>
<body>
<script>
xmlDoc=loadXMLDoc("books.xml");
document.write("Number of book nodes: ");
document.write(xmlDoc.getElementsByTagName('book').length);
document.write("<br>");
y=xmlDoc.getElementsByTagName("book")[0];
xmlDoc.documentElement.removeChild(y);
document.write("Number of book nodes after removeChild(): ");
document.write(xmlDoc.getElementsByTagName('book').length);
</script>
</body>
</html>インスタンスの実行»
オンライン インスタンスを表示するには、[インスタンスの実行] ボタンをクリックします
説明例:
loadXMLDoc()を使用して、「books.xml」をxmlDocにロードします
変数yを削除する要素ノードに設定します
removeChildを使用して親ノードから要素を削除します() メソッド Node
自体を削除 - 現在のノードを削除します
removeChild() メソッドは、指定されたノードを削除できる唯一のメソッドです。
削除する必要があるノードに移動したら、parentNode 属性とremoveChild() メソッドを使用してこのノードを削除できます:
Instance
<!DOCTYPE html>
<html>
<head>
<script src="loadxmldoc.js">
</script>
</head>
<body>
<script>
xmlDoc=loadXMLDoc("books.xml");
document.write("Number of book nodes before removeChild(): ");
document.write(xmlDoc.getElementsByTagName("book").length);
document.write("<br>");
x=xmlDoc.getElementsByTagName("book")[0]
x.parentNode.removeChild(x);
document.write("Number of book nodes after removeChild(): ");
document.write(xmlDoc.getElementsByTagName("book").length);
</script>
</body>
</html>Run Instance»
「」をクリックします「インスタンスを実行」ボタン オンラインの例を表示
例の説明:
loadXMLDoc()を使用して、「books.xml」をxmlDocにロードします
変数yを削除する要素ノードに設定します
parentNode属性とremoveChild()を使用するメソッド この要素ノードを削除します
テキスト ノードを削除します
removeChild() メソッドを使用してテキスト ノードを削除できます:
Instance
<!DOCTYPE html>
<html>
<head>
<script src="loadxmldoc.js">
</script>
</head>
<body>
<script>
xmlDoc=loadXMLDoc("books.xml");
x=xmlDoc.getElementsByTagName("title")[0];
document.write("Child nodes: ");
document.write(x.childNodes.length);
document.write("<br>");
y=x.childNodes[0];
x.removeChild(y);
document.write("Child nodes: ");
document.write(x.childNodes.length);
</script>
</body>
</html>インスタンスを実行する»
「インスタンスを実行」ボタンをクリックして、オンラインインスタンスを表示します
例の説明:
loadXMLDoc()を使用して、「books.xml」をxmlDocにロードします
変数xを最初のタイトル要素ノードに設定します
変数yを設定します削除するテキストにノード
removeChild() メソッドを使用して親ノードから要素を削除します。ノード
あまり一般的ではありませんが、removeChild() はノードからテキストを削除します。代わりに、nodeValue 属性を使用できます。次の段落を参照してください。
テキスト ノードをクリアする
nodeValue 属性を使用して、テキスト ノードの値を変更またはクリアできます:
例
<!DOCTYPE html>
<html>
<head>
<script src="loadxmldoc.js">
</script>
</head>
<body>
<script>
xmlDoc=loadXMLDoc("books.xml");
x=xmlDoc.getElementsByTagName("title")[0].childNodes[0];
document.write("Value: " + x.nodeValue);
document.write("<br>");
x.nodeValue="";
document.write("Value: " + x.nodeValue);
</script>
</body>
</html>インスタンスの実行»
「インスタンスの実行」ボタンをクリックして、オンライン例
インスタンスの説明:
loadXMLDoc()を使用して「books.xml」をxmlDocにロードします
変数xを最初のタイトル要素のテキストノードに設定します
nodeValue属性を使用しますテキスト ノードのテキストをクリアします
すべての <title> 要素のテキスト ノードを変更します: 試してみてください
名前に基づいて属性ノードを削除します
removeAttribute(name) メソッドを使用します名前に基づいて属性ノードを削除します。
例:removeAttribute('category')
次のコード スニペットは、最初の <book> 要素の「category」属性を削除します。 「例」ボタンをクリックしてオンライン例を表示します
例の説明:
loadXMLDoc()を使用して「books.xml」をxmlDocにロードします
getElementsByTagName()を使用して書籍ノードを取得します
最初の書籍要素ノードから「category」を削除します
すべての <book> 要素の「category」属性をトラバースして削除します: 試してください
オブジェクトに基づいて属性ノードを削除します
removeAttributeNode(node) メソッドは、ノード オブジェクトをパラメータとして使用して属性ノードを削除します。
例:removeAttributeNode(x)
次のコード スニペットは、すべての <book> 要素のすべての属性を削除します。オンライン例
- 各book要素に属性があるかどうかを確認します
