javascript - document.getElementsByClassName() 无法正常工作？

Question

我在特定的xpath上使用evaluate()找到所有节点，然后我添加类来突出显示这些节点，但是当我尝试删除这些类以取消突出显示这些节点时，它仅取消突出显示一半。即使循环也只运行一半时间。

i have made a fiddle以显示。谁能告诉我为什么它只突出显示一半？HTML 部分:

<div id="div1">abcdefghi</div>
<div id="div4">abcdefghi</div>
<div id="div2">abcdefghi</div>
<div id="div3">abcdefghi</div>

JS 部分:

(function xpathTest()
{
  var nodesSnapshot = document.evaluate("//div", document, null,XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
 for ( var i=0 ; i < nodesSnapshot.snapshotLength; i++ )
 {
   nodesSnapshot.snapshotItem(i).classList.add('highlight_csspath_chosen');
 }
 var ele = document.getElementsByClassName("highlight_csspath_chosen");
 for(i=0;i<ele.length;i++)
 {
  alert(i);
  ele[i].classList.remove("highlight_csspath_chosen");
 }
 })();

CSS部分:

.highlight_csspath_chosen{
background-color: #ff8533 !important;
outline: 1px solid #5166bb !important;
}

Answer 1

ele 变量通过类highlight_csspath_chosen 来保存 DOM 元素的引用。因此，随着循环的进行，ele 的长度也会减少。

例如，

开始时ele的长度为4，i=0

当你从第一个元素中删除 class 时，下一次迭代的长度变为 3，i 变为 1，因此它引用初始数组的第三个元素

初始数组 = [A, B, C, D] 且 i = 0

A 中的类被删除，

数组更新为 [B, C, D]//因为现在只有这些元素包含该类

i 现在 = 1 ，即 [C]//跳过 [B]

因此，在每次迭代中，都会跳过 1 个元素，因此一半的元素会被更新。

检查 fiddle 中的解决方案

http://jsfiddle.net/Lrb8j22p/52/

var ele = document.getElementsByClassName("highlight_csspath_chosen"); 
ele = Array.prototype.slice.call(ele,0);

我已将 ele 转换为数组，因此它不会引用 DOM