dom_dom0700_002

cloneNode(true) で複製した要素について「正しい」のはどれか。

  1. 元の要素に登録されていたイベントリスナーも複製される
  2. 元の要素に紐づく dataset は複製されない
  3. 元の要素の id もそのまま複製されるため重複に注意が必要
  4. カスタムデータ(data-*)属性は複製されない
正解
  1. 元の要素の id もそのまま複製されるため重複に注意が必要
解説

DOM属性はコピーされるため id も複製される。重複 id はセレクター等で混乱の元。イベントリスナーは コピーされない。data-* 属性や dataset も属性として複製される。

使用例(サンプルコード)

[ html ]

<button id="save">Save</button>
<script>
  const btn = document.getElementById('save');
  btn.addEventListener('click', () => console.log('orig'));

  const cloned = btn.cloneNode(true); // イベントは複製されない
  cloned.id = 'save-copy';            // id 重複を避ける
  cloned.addEventListener('click', () => console.log('clone'));
  document.body.appendChild(cloned);
</script>