HTML要素がノードリストから消える

Question

JavaScriptを使用して特定のCSSを持つすべての要素を検索し、このCSSを別のCSSに置き換えようとしています。

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

function change_color() 
 
{ 
 

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

 
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

ここで何が問題になっています。しかし、奇妙なことは、CSSが行の後に除去された後に私の要素のリストが変わってしまうのですか？あなたは

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

.getElementsByClassName()は「ライブ」ノードリストを返す使用して最初の場所でのノードリストに要素のを取得しているので、

Answer 1

理由があるようにあなたが取得した後、任意の任意のポイント（イベントリストから要素が追加または削除され、その変更がリストに影響すると、リストは自動的に更新されます。代わり

に行を変更：

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

.querySelectorAll()は、静的ノードリストを返し、そうライン実行後でとしてそのノードのリストであろう要素である場合、それは見つけた要素（要素がDOMから完全に削除されていないと仮定して）