javascript - HTML 元素从节点列表中消失

Question

我正在尝试使用 javascript 查找具有特定 css 的所有元素，并将此 css 替换为另一个。但奇怪的是，在 css 被删除后，我的元素列表会发生变化:

element_list[i].classList.remove( "css1" ); 

function change_color()
{

	debugger;
	var element_list =  document.getElementsByClassName('css1');
	
	for(var i=0; i< element_list.length; i++) 
	{
    document.getElementById('length_indicator').innerHTML += element_list.length+',';
		element_list[i].classList.remove( "css1" );	//item in control_list would be lost
    
    document.getElementById('length_indicator').innerHTML += element_list.length+',';
		element_list[i].classList.add( "css2" );	//item added to second item
	}
}

change_color();

.css1
{
  background-color: red;
}
.css2
{
  background-color: yellow;
}

<div class="css1">
  div 1
</div>

<div class="css1">
  div 2
</div>

<div class="css1">
  div 3
</div>

array length: <label id='length_indicator'/>

jsfiddle example

这里有什么问题吗？

Answer 1

原因是因为您首先通过使用将元素放入节点列表

var element_list =  document.getElementsByClassName('css1');

.getElementsByClassName() 返回一个“实时”节点列表，以便任何时候(获取列表后的事件)元素被添加到 DOM 中或从中删除，并且该更改会影响列表，列表会自动更新。

相反，将行更改为:

var element_list =  document.querySelectorAll('css1');

.querySelectorAll() 返回一个静态节点列表，因此它在该行执行时找到的元素也是稍后将在该节点列表中的元素(假设元素尚未从 DOM 中完全删除)。