dom_dom0700_001

cloneNode() の引数に true を渡した場合の挙動として「正しい」のはどれか。

  1. ノード本体のみ複製し、子ノードは複製しない
  2. ノードとすべての子孫ノードを深い階層まで複製する
  3. ノードは複製せず、子ノードのみを複製する
  4. ノードと子孫は複製するが属性は複製されない
正解
  1. ノードとすべての子孫ノードを深い階層まで複製する
解説

cloneNode(deep) の deep が true のとき、対象ノードとその子孫ノード(属性も含む)が「深いコピー」で複製される。false のときは対象ノードのみ(属性は含むが子孫は含まない)。

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

[ html ]

<ul id="list"><li><strong>A</strong></li></ul>
<script>
  const li = document.querySelector('#list li');
  const deepClone = li.cloneNode(true);   // <li><strong>A</strong></li>
  const shallowClone = li.cloneNode(false); // <li></li>(属性は維持)
  document.querySelector('#list').appendChild(deepClone);
</script>