自定义HTML标签遍历异常：for循环未遍历全部alert标签

我正在完成一项课程项目，需要用JavaScript实现自定义HTML标签。写了for循环遍历所有自定义<alert>标签，但运行时只能遍历到奇数位置的标签。

问题代码 #

JavaScript代码 #

for (i = 0; i < document.querySelectorAll("alert").length; i++) {
  console.log(document.querySelectorAll("alert")[i].innerHTML);
  document.querySelectorAll("alert")[i].remove();
}

HTML代码 #

<body>
  <alert>Hello!</alert>
  <alert>How do you do?</alert>
  <alert>Are you doing good?</alert>
  <alert>I hope you are!</alert>
  <alert>Bizzle</alert>
  <alert>Fizzle</alert>
  <alert>Grizzle</alert>
</body>

你每次循环都重新调用document.querySelectorAll("alert")，而且每次循环会删掉当前元素，导致剩下的元素索引自动往前挪。举个例子：

• 第一次循环i=0，删掉第0个元素，剩下的元素索引变成0到5
• 第二次循环i=1，此时新的查询结果里取索引1的元素，其实是原来的第2个元素，直接跳过了原来的第1个
• 这么循环下去，自然只能拿到奇数位置的元素

给你几个靠谱的方案：

1. 转成数组后倒序遍历
   倒序遍历不会因为元素删除导致索引错位，因为每次删的都是最后一个元素，前面的元素索引不受影响：

const alerts = Array.from(document.querySelectorAll("alert"));
for (let i = alerts.length - 1; i >= 0; i--) {
  console.log(alerts[i].innerHTML);
  alerts[i].remove();
}

2. 先存好所有元素再正序遍历
   先把所有<alert>元素存到数组里，之后遍历这个静态数组——就算元素被删掉，数组里的引用还在，不会影响遍历：

const alerts = document.querySelectorAll("alert");
for (const alertEl of alerts) {
  console.log(alertEl.innerHTML);
  alertEl.remove();
}

也可以用普通for循环：

const alerts = Array.from(document.querySelectorAll("alert"));
for (let i = 0; i < alerts.length; i++) {
  console.log(alerts[i].innerHTML);
  alerts[i].remove();
}

3. 循环删除第一个元素直到没有
   不用管索引，每次只删第一个<alert>元素，直到页面上没有这个标签为止：

let alertEl;
while (alertEl = document.querySelector("alert")) {
  console.log(alertEl.innerHTML);
  alertEl.remove();
}

内容的提问来源于stack exchange，提问作者SipSup