JavaScript cloneNode() メソッド

概要：このチュートリアルでは、JavaScript の cloneNode() メソッドを使用して要素を複製する方法を学びます。

cloneNode() メソッドの概要

cloneNode() は、要素を複製できる Node インターフェースのメソッドです。

let clonedNode = originalNode.cloneNode(deep);Code language: JavaScript (javascript)

パラメータ

deep

cloneNode() メソッドは、オプションのパラメータ deep を受け取ります。

deep が true の場合、元のノードとそのすべての子孫が複製されます。
deep が false の場合、元のノードのみが複製されます。ノードの子孫は複製されません。

deep パラメータは省略すると、デフォルトで false になります。

originalNode

originalNode は、複製される要素です。

戻り値

cloneNode() は、originalNode のコピーを返します。

使用上の注意

DOM 構造に加えて、cloneNode() は元のノードのすべてのアトリビュートとインラインリスナーをコピーします。ただし、addEventListener() で追加されたイベントリスナーや、originalNode.onclick = eventHandler() のように要素のプロパティに代入されたイベントリスナーはコピーしません。

id アトリビュートを持つノードを複製し、複製されたノードを同じドキュメントに配置すると、id が重複します。この場合、DOM ツリーに追加する前に id を変更する必要があります。

JavaScript cloneNode() メソッドの例

次の例では、cloneNode() メソッドを使用して <ul> 要素をコピーし、同じドキュメントに配置します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JavaScript cloneNode() Demo</title>
</head>
<body>
    <ul id="menu">
        <li>Home</li>
        <li>Services</li>
        <li>About</li>
        <li>Contact</li>
    </ul>
    <script>
        let menu = document.querySelector('#menu');
        let clonedMenu = menu.cloneNode(true);
        clonedMenu.id = 'menu-mobile';
        document.body.appendChild(clonedMenu);
    </script>
</body>
</html>
Code language: HTML, XML (xml)

仕組み

まず、querySelector() メソッドを使用して、id が menu の <ul> を選択します。
次に、cloneNode() メソッドを使用して、<ul> 要素のディープクローンを作成します。
3 番目に、重複を避けるために、複製された要素の id を変更します。
最後に、appendChild() メソッドを使用して、複製された要素を document.body の子ノードに追加します。

出力

まとめ

ノードを複製するには、node.cloneNode() メソッドを使用します。
DOM 要素のディープクローンを作成するには、cloneNode() メソッドに true を渡します。

クイズ

このチュートリアルは役に立ちましたか？