Javascript Live Nodelist Loop

Question

也許有人問過同樣的問題，但我沒有在可能已經有你的答案的問題中找到任何類似的結果，所以我會繼續問我的問題。我知道這是活着的列表，當第一個className將列表從3項改爲2。所以我現在是1，所以這就是爲什麼它跳過列表中的「第二項」。在循環中包含活動節點列表中的所有項目的最佳方式是什麼？ （也許用一個靜態？）

 var hotElements = document.getElementsByClassName("hot"); 
 
     var i; 
 
     var len = hotElements.length; 
 

 
     for (i= 0; i < len ; i++) { 
 
      hotElements[i].className = "pink"; 
 
    }

 .hot { 
 
    background-color: red; 
 
    color: black; 
 
    font-size: 20px; 
 
    weight: 700; 
 
} 
 
.cool { 
 
    background-color: blue; 
 
    font-size: 25px; 
 
} 
 
.pink { 
 
    background-color: pink; 
 
    font-size: 35px;

<h1 id="header"> List King </h1> 
 
<h2> Buy grocceries </h2> 
 
<ul> 
 
    <li id="one" class="hot"> Fresh </li> 
 
    <li id="two" class="hot"> Fresh 1</li> 
 
    <li id="three" class="hot"> Fresh 2 </li> 
 
    <li id="one" class="cool"> Fresh </li> 
 
    <li id="two" class="cool"> Fresh 1</li> 
 
    <li id="three" class="cool"> Fresh 2 </li> 
 
</ul>

Answer 1

一種方法是遍歷集合倒退，這種方式：

試試這個任何其餘的元素：

var hotElements = document.getElementsByClassName("hot"), 
    i; 

for (i = hotElements.length - 1; 0 <= i; i--) { 
    hotElements[i].className = "pink"; 
} 

一個優點這種方法在while(hotElements.length > 0)解決方案，0123建議的是，如果您有條件地應用新的className而不是對每個元素執行操作，它都不依賴於要刪除的元素。

您也可以將活動節點集合轉換爲不會更改的實數組。

使用ES2015這是很容易使用spread語法做：

var hotElements = document.getElementsByClassName("hot"); 

[...hotElements].forEach(function (element) { 
    element.className = "pink"; 
}); 

你也可以做到這一點在ES5多一點代碼：

var hotElements = document.getElementsByClassName("hot"); 

Array.prototype.slice.call(hotElements).forEach(function (element) { 
    element.className = "pink"; 
}); 

使用slice轉換成數組在IE < 9中不起作用...但在此時此可能不是問題。

另一種方法是使用querySelectorAll。它返回一個非活節點列表，所以如果你用它來尋找元素，你仍可以循環遍歷其轉發：

var hotElements = document.querySelectorAll(".hot"), 
    i, 
    len = hotElements.length; 

for (i = 0; i < len ; i++) { 
    hotElements[i].className = "pink"; 
} 

有趣的相關文章：A comprehensive dive into NodeLists, Arrays, converting NodeLists and understanding the DOM

Answer 2

document.getElementsByClassName是活的，這意味着元素將被自動時，他們的className改變刪除。如果項目被刪除它不會影響的立場是，在過去使用

var hotElements = document.getElementsByClassName("hot"); 
 

 
// While loop to iterate while there are items left 
 
while(hotElements.length > 0) { 
 
    hotElements[0].className = "pink"; 
 
} 

.hot { 
 
    background-color: red; 
 
    color: black; 
 
    font-size: 20px; 
 
    weight: 700; 
 
} 
 
.cool { 
 
    background-color: blue; 
 
    font-size: 25px; 
 
} 
 
.pink { 
 
    background-color: pink; 
 
    font-size: 35px;

<h1 id="header"> List King </h1> 
 
<h2>Buy groceries</h2> 
 
<ul> 
 
    <li id="one" class="hot"> Fresh </li> 
 
    <li id="two" class="hot"> Fresh 1</li> 
 
    <li id="three" class="hot"> Fresh 2 </li> 
 
    <li id="one" class="cool"> Fresh </li> 
 
    <li id="two" class="cool"> Fresh 1</li> 
 
    <li id="three" class="cool"> Fresh 2 </li> 
 
</ul>