DOM 清除所有的子元素

在練習時碰到的問題。

方法一 innerHTML

最直覺也簡單的方法，但會有效能上的問題（會觸發瀏覽器重新 parse）：

<div class="parent">
  <div>
    <div>
      <div>
        <div>
          <div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

document.querySelector('.parent').innerHTML = ''

Output：

<div class="parent"></div>

方法二 textContent

不會觸發瀏覽器重新 parse，原理是把子元素都變成 #text：

<div class="parent">
  <div>
    <div>
      <div>
        <div>
          <div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

document.querySelector('.parent').textContent = ''

Output：

<div class="parent"></div>

方法三 while 迴圈 + lastChild

建議從 lastChild 來刪，比較不會出現一些誤差問題：

<div class="parent">
  <div>
    <div>
      <div>
        <div>
          <div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

const node = document.querySelector('.parent')
removeAllChild(node)

function removeAllChild(node) {
  while(node.firstChild) {
  // 只要底下有子元素就執行
    node.removeChild(node.lastChild)
  }
}

Output：

<div class="parent"></div>

方法四 while 迴圈 + lastElementChild

會留下 #text 跟 #comment 節點的方法，目的是因為早期支援要 IE 的時候會不希望把 comment 給刪除。但現在 IE 已死所以這方法比較不常用了：

<div id='foo'>
  <!-- This comment won't be removed -->
  <span>Hello <!-- This comment WILL be removed --></span>
  <!-- But this one won't. -->
</div>
<button id='doFoo'>Remove via lastElementChild-loop</button>

const doFoo = document.getElementById('doFoo')
doFoo.onclick = () => {
  const node = document.getElementById('foo')
  while(node.lastElementChild) {
    node.removeChild(node.lastElementChild)
  }
  console.log(node.childNodes)
}

Output：

<div id='foo'>
    <!-- This comment won't be removed -->
    <!-- But this one won't. -->
</div>

方法四 replaceChildren

如果不傳入 node 代表刪除所有子元素，有的話則會被放進去取代：

<div id='foo'>
  <span>Hello</span>
  <p>yoyoyo</p>
</div>

const newElem1 = document.createElement('article')
const newElem2= document.createElement('section')
document.getElementById('foo').replaceChildren(newElem1, newElem2)

Output：

<div id='foo'>
  <article></article>
  <section></section>
</div>

刪除所有子元素：

document.getElementById('foo').replaceChildren()

Output：

<div id='foo'></div>