cloneNode(true) で複製した要素について「正しい」のはどれか。
- 元の要素に登録されていたイベントリスナーも複製される
- 元の要素に紐づく dataset は複製されない
- 元の要素の id もそのまま複製されるため重複に注意が必要
- カスタムデータ(data-*)属性は複製されない
正解
- 元の要素の 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>