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

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

初始数组= [A，B，C，D]和i = 0

来自A的

类被删除，

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

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

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

检查小提琴中的解决方案

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

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

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

Answer 2

Javascript document.getElementsByClassName返回一个实时集合，这意味着DOM中的更改会反映在集合中。因此，对于每次迭代，列表的大小减少1，因此ele.length不是常数。因此循环迭代两次而不是4次。您可以使用for-each循环替换它。

for(var element : ele){
   ele.classList.remove("highlight_csspath_chosen");
}

有关实时收藏的更多信息，请参阅Live Collection

document.getElementsByClassName（）无法正常工作？

2 个答案: