0

次のコードを検討してください。

xr = document.querySelectorAll('.material-tooltip'); // NodeList
console.log(xr.length); // 50
for (ya of xr)
  ya.parentNode.removeChild(ya);
zu = document.querySelectorAll('.material-tooltip');
console.log(zu.length); // 0

これは期待どおりに機能し、見つかった要素をすべて削除します。次のコードを検討してください。

xr = document.getElementsByClassName('material-tooltip'); // HTMLCollection
console.log(xr.length); // 50
for (ya of xr)
  ya.parentNode.removeChild(ya);
zu = document.getElementsByClassName('material-tooltip');
console.log(zu.length); // 25

見つかった要素の半分だけを削除しています。これは何が原因ですか？

4

1 に答える 1

2

querySelectorAll非ライブを返しますNodeList。getElementsByClassNamelive を返しますHTMLCollection。前者は任意の配列と同様に動作します。配列を調べてから、各要素に対して何かを行います。しかし、ライブHTMLCollectionは違います。そのコンテンツは、いつでも DOM の現在の状況を反映しています。要素を DOM から削除するxrと に表示されなくなり、セレクターに適合する要素を DOM に追加すると、を実行した後xrでも に表示されます。getElementsByClassName

yabeingの最初の繰り返しをしましょう0。を削除するxr[0]と、リストから消えます。これで要素 1 はxr[0]; yaになり1ます。xr[1]要素 1 をスキップして (要素 2)を削除します。xr[2]次に、 (要素 3)を削除し、要素 4 をスキップします... など。

live を操作しているときはいつでもHTMLCollection、要素が消えて混乱しないように後ろから前に移動するか、 を複製してその要素を所定の位置に修正するか、が空になるまでHTMLCollectionループを削除するだけです。xr[0]xr

于 2015-12-25T04:01:17.293 に答える