Question

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

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

＆＃13;

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();

＆＃13;

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

＆＃13;

<div class="css1">
  div 1
</div>

<div class="css1">
  div 2
</div>

<div class="css1">
  div 3
</div>

array length: <label id='length_indicator'/>

＆＃13;

jsfiddle example

这里有什么问题？

Answer 1

原因是因为您首先使用

将元素放入节点列表中

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

.getElementsByClassName() 会返回＆＃34;直播＆＃34;节点列表，以便任何点（获取列表后的事件）从DOM添加或删除元素，并且该更改将影响列表，列表会自动更新。

相反，请将行更改为：

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

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

HTML元素从节点列表中消失

1 个答案: