clonenode の使用法_clonenode の使用法とは-よくある問題-php.cn

クローンノードの使用法

zbt

リリース： 2023-11-24 10:51:06

オリジナル

1553 人が閲覧しました

JavaScript では、 cloneNode() はノードをコピーするために使用されるメソッドです。 HTML ドキュメント内の要素ノードをコピーするために使用でき、ノードのすべての子ノードをコピーするかどうかを選択できます。

クローンノードの使用法

#JavaScript では、 cloneNode() はノードをコピーするために使用されるメソッドです。これは、HTML ドキュメント内の要素ノードをコピーするために使用でき、ノードのすべての子ノードをコピーするかどうかを選択できます。 cloneNode() メソッドは DOM (Document Object Model) によって提供されるメソッドで、基本的な使用方法は次のとおりです。

var originalNode = document.getElementById("originalElement");
var clonedNode = originalNode.cloneNode(true);

ログイン後にコピー

上記のコードでは、originalNode コピーされる元のノードを表します。これは任意の HTML 要素にすることができます。 cloneNode(true) のパラメータ true は、ノードとそのすべての子ノードをコピーすることを意味します。 false を渡すと、ノード自体のみがコピーされます。

cloneNode() メソッドは、要素自体とそのすべての子要素の属性のみをコピーしますが、元の要素に追加されたイベントリスナーやデータはコピーしないことに注意してください。同時に、コピーされたノードはドキュメントフローから切り離され、メモリ内で完全に独立したコピーとなり、コピーされたノードに対する操作は元のノードに影響を与えません。

以下は、 cloneNode() の使用法を示す、より包括的な例です。

<!DOCTYPE html>
<html>
<body>
<div id="original">Original Node
  <span>Subnode 1</span>
  <span>Subnode 2</span>
</div>
<button onclick="cloneElement()">Clone Node</button>
<script>
function cloneElement() {
  var originalNode = document.getElementById("original");
  var clonedNode = originalNode.cloneNode(true);
  clonedNode.id = "cloned"; // 修改克隆节点的id属性
  document.body.appendChild(clonedNode);
}
</script>
</body>
</html>

ログイン後にコピー

上の例では、[ノードのクローン] をクリックします。ボタンをクリックすると、元のノードのクローンが作成され、ドキュメントの最後に追加されます。この例をブラウザで開き、ボタンをクリックすると、ページに追加された元のノードのクローンを確認できます。

cloneNode() メソッドは、元のノードに影響を与えることなく、JavaScript で要素ノードを動的に作成および管理するのに役立つ非常に便利なツールです。

以上がクローンノードの使用法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。