JavaScriptでノードを置き換える方法-フロントエンドQ&A-php.cn

JavaScriptでノードを置き換える方法

WBOY

リリース： 2022-01-04 15:23:50

オリジナル

4228 人が閲覧しました

JavaScript では、replaceChild() メソッドを使用してノードを置き換えることができます。このメソッドの機能は、特定の子ノードを別の子ノードに置き換えることです。新しいノードは、既存のノードまたは新しく作成されたノードになります。構文は「node.replaceChild(newnode,oldnode)」です。

JavaScriptでノードを置き換える方法

このチュートリアルの動作環境: Windows 10 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

JavaScript でノードを置換する方法

JavaScript replaceChild() メソッドは、子ノードを別のノードに置換できます。使用法は次のとおりです。

nodeObject.replaceChild(new_node, old_node)

ログイン後にコピー

パラメータ new_node は指定された新しいノード、old_node は置き換えられたノードです。置換が成功した場合は置換されたノードが返され、置換が失敗した場合は null が返されます。

例 1

上記の例に基づいてスクリプトを書き直し、新しい第 2 レベルの title 要素を作成し、赤いボックス内の第 1 レベルの title 要素を置き換えます。

var ok = document.getElementById("ok");  //获取按钮元素的引用
ok.onclick = function () {  //为按钮注册一个鼠标单击事件处理函数
    var red = document.getElementById("red");  //获取红色盒子的引用
    var h1 = document.getElementsByTagName("h1")[0];  //获取一级标题的引用
    var h2 = documeng.createElement("h2");  //创建二级标题元素并引用
    red.replaceChild(h2, h1);  //把一级标题替换为二级标题
}

ログイン後にコピー

デモでは、第 1 レベルのタイトルが新しく作成された第 2 レベルのタイトルに置き換えられると、元の第 1 レベルのタイトルに含まれていたタイトルテキストが存在しなくなることがわかりました。これは、ノードを置換する操作が要素名を置換するのではなく、それに含まれるすべての子ノードとそれに含まれるすべてのコンテンツを置換することを示しています。

同様に、置換ノードに子ノードも含まれている場合、子ノードは置換ノードに一緒に挿入されます。 replaceChild() メソッドを使用して、ドキュメント内の既存のノードを別の既存のノードに置き換えることができます。

例は次のとおりです:

<html>
<head>
<meta charset="utf-8">
<title>123</title>
</head>
<body>
<ul id="myList"><li>Coffee</li><li>Tea</li><li>Milk</li></ul>
<p id="demo">单击按钮替换列表中的第一项。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
var textnode=document.createTextNode("Water");
var item=document.getElementById("myList").childNodes[0];
item.replaceChild(textnode,item.childNodes[0]);
}
</script>
<p>首先创建一个文本节点。<br>然后替换第一个列表中的第一个子节点。</p>
<p><strong>注意:</strong>这个例子只将文本节点的文本节点“Coffee”替换为“Water”,而不是整个LI元素,这也是替换节点的一种备选。</p>
</body>
</html>

ログイン後にコピー

出力結果:

JavaScriptでノードを置き換える方法