ループを使用してulのli要素を空にしたい場合、最初に考えるのは、すべてのliを直接取得し、ループ内で削除することです。
ただし、li要素を取得する方法が異なると、結果も異なります。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li {
background-color: aqua;
}
</style>
</head>
<body>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
<li>li4</li>
<li>li5</li>
<li>li6</li>
<li>li7</li>
<li>li8</li>
<li>li9</li>
<li>li10</li>
</ul>
</body>
</html>
次のメソッドを使用して要素を取得し、それらを周期的に削除するとします。
<script>
var ul = document.getElementsByTagName('ul')[0];
var lis = document.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
ul.removeChild(lis[i]);
}
</script>
結果はこれです：
あなたが思うのと同じです！
とにかく、思っていたものとは違います（全部削除したかった）。
どうして？？？
getElementsByを使用して、動的コレクションを取得します。要素が削除されると、コレクション内の要素の位置とコレクションの長さが変更されます。
たとえば、最初の要素が削除されると、次の要素が前方に移動し、2番目の要素が最初の要素になり、コレクションの長さが1つ短くなります。
その結果、単一のノードのみが削除されました。
この問題を解決する方法は？？
Document.querySelectorメソッドを取得できます
この方法で取得された要素のコレクションは静的であり、コレクション内の要素の位置は、内部の要素がdomから削除されても変更されず、長さも固定されます。
<script>
var ul = document.querySelector('ul');
// 使用querySelect获得的是静态集合
var lis = document.querySelectorAll("ul li");
for (var i = 0; i < lis.length; i++) {
ul.removeChild(lis[i]);
}
</script>
この後、ul内のすべてのli要素を仮想ループで削除できます