From 478de33ac5a748d403c77bed813546f57e53c05e Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 27 Feb 2022 15:00:03 +0900 Subject: 2021/11/08 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/node/clonenode/index.md | 75 ++++++++++++++++---------------- 1 file changed, 37 insertions(+), 38 deletions(-) (limited to 'files/ja/web/api/node') diff --git a/files/ja/web/api/node/clonenode/index.md b/files/ja/web/api/node/clonenode/index.md index db00fc7a61..ff734aa6c0 100644 --- a/files/ja/web/api/node/clonenode/index.md +++ b/files/ja/web/api/node/clonenode/index.md @@ -1,62 +1,61 @@ --- title: Node.cloneNode() slug: Web/API/Node/cloneNode +tags: + - メソッド + - リファレンス +browser-compat: api.Node.cloneNode translation_of: Web/API/Node/cloneNode --- -
{{ApiRef}}
+{{APIRef("DOM")}} -

概要

+**`cloneNode()`** は {{domxref("Node")}} インターフェイスのメソッドで、このメソッドが呼び出されたノードの複製を返します。 +引数でノードに含まれるサブツリーを一緒に複製するかどうかを制御できます。 -

現在のノードの複製を返します。

+ノードを複製すると、固有（インライン）のリスナーを含む、ノードのすべての属性とその値が複製されます。 [`addEventListener()`](/ja/docs/Web/API/EventTarget/addEventListener) を使って追加されたイベントリスナーや、要素のプロパティに代入されたイベントリスナー（例: `node.onclick = someFunction`）は複製されません。さらに、 {{HTMLElement("canvas")}} 要素では、描画された画像は複製されません。 -

構文

+> **Warning:** `cloneNode()` を使用すると、文書内で要素の ID が重複する可能性があります。 +> +> 元のノードに `id` 属性があり、複製を同じ文書に配置する場合は、複製の ID が重複しないように変更してください。 +> +> また、 `name` 属性も重複した名前を使わない場面では、変更する必要があるかもしれません。 -
var dupNode = node.cloneNode(deep);
-
+**異なる**文書にノードを複製する場合は、代わりに {{domxref("Document.importNode()")}} を使用してください。 -
-
node
-
複製するノード
-
dupNode
-
新しく生成される node の複製
-
deep {{optional_inline}}
-
node の子孫ノードも複製する場合は true 、 node のみを複製する場合は false -
-

注記: DOM4 の仕様では (Gecko 13.0 {{geckoRelease("13.0")}} で実装) 、 deep は省略可能な引数です。省略された場合、 deep には true が渡され、深い複製を生成します。浅い複製を生成するには、 deep を false にする必要があります。

+## 構文 -

以前のDOMの仕様を実装しているブラウザでは、 deep は必須の引数です。

-
-
-
+```js +cloneNode(); +cloneNode(deep); +``` -

例

+### 引数 -
var p = document.getElementById("para1");
-var p_prime = p.cloneNode(true);
-
+- `deep` {{optional_inline}} -

注記

+ - : `true` の場合、ノードとそのサブツリーは、子ノードの {{domxref("Text")}} にあるテキストも含め複製されます。 -

ノードを複製すると、そのノードのすべての属性とその値がコピーされます。つまり、HTML属性のイベントを含みます。addEventListener() を使用したものや、要素のプロパティに代入されたもの (例: node.onclick = fn;) は複製されません。

+ `false` の場合、このノードのみが複製されます。 + サブツリーは、そのノードに含まれているテキストも含め、複製されません。 -

cloneNode によって返される複製ノードは、 {{domxref("Node.appendChild()")}} や同種のメソッドによってドキュメントの一部である他のノードに追加されるまでは、ドキュメントの一部ではありません。また、他のノードに追加されるまでは、親ノードを持ちません。

+ なお、 `deep` は {{HTMLElement("img")}} や {{HTMLElement("input")}} のような空要素には効果がありません。 -

deep が false に設定されていると、どの子ノードも複製されません。 そのため、そのノードに含まれる {{domxref("Text")}} ノードも複製されません。

+### 返値 -

deep が true に評価できる場合、サブツリー全体 (子 {{domxref("Text")}} ノードにあるテキストを含む) もコピーされます。 {{HTMLElement("img")}} や {{HTMLElement("input")}} 要素などの空ノードの場合には deep を true と false のどちらに設定してもかまいません。

+複製された {{domxref("Node")}} を返します。 +複製されたノードには、文書に所属する他のノードに {{domxref("Node.appendChild()")}} などを使用して追加されるまで、親ノードがなく、文書にも所属していません。 -
注意: cloneNode() を使用すると、ドキュメント内で要素の id が重複する可能性があります。
+## 例 -

別のドキュメントに追加するためにノードを複製する場合は、代わりに {{domxref("Document.importNode()")}} を使用してください。

+```js +let p = document.getElementById("para1") +let p_prime = p.cloneNode(true) +``` -

ブラウザ実装状況

+## 仕様書 -

{{Compat("api.Node.cloneNode")}}

+{{Specifications}} -

仕様書

+## ブラウザーの互換性 - +{{Compat}} -- cgit v1.2.3-54-g00ecf