的Javascript classList.remove不能正常工作

檢查此琴：JSFiddle 的Javascript classList.remove不能正常工作

HTML：

<table class="myTable"> 
    <tr> 
    <th>Some text</th> 
    <td class="align"> 
     <span class=" someStyle">1</span>/<span class="otherStyle">15</span> 
    </td> 
    <th>Some text</th> 
    <td class="align"> 
     <span class=" someStyle">2</span>/<span class="otherStyle">16</span> 
    </td> 
    </tr> 
    <tr> 
    <th>Some text</th> 
    <td class="align"> 
     <span class="">3</span>/<span class="">17</span> 
    </td> 
    <th>Some text</th> 
    <td class="align"> 
     <span class="otherStyle">4</span>/<span class=" someStyle">18</span> 
    </td> 
    </tr> 
    <tr> 
    <th>Some text</th> 
    <td class="align"> 
     <span class="otherStyle">5</span>/<span class=" someStyle">19</span> 
    </td> 
    <th>Some text</th> 
    <td class="align"> 
     <span class="">6</span>/<span class="">20</span> 
    </td> 
    </tr> 
    <tr> 
    <th>Some text</th> 
    <td class="align"> 
     <span class="">7</span>/<span class="">21</span> 
    </td> 
    <th>Some text</th> 
    <td class="align"> 
     <span class=" someStyle">8</span>/<span class="otherStyle">22</span> 
    </td> 
    </tr> 
    <tr> 
    <th>Some text</th> 
    <td class="align"> 
     <span class="">9</span>/<span class="">23</span> 
    </td> 
    <th>Some text</th> 
    <td class="align"> 
     <span class="otherStyle">10</span>/<span class=" someStyle">24</span> 
    </td> 
    </tr> 
    <tr> 
    <th>Some text</th> 
    <td class="align"> 
     <span class="otherStyle">11</span>/<span class=" someStyle">25</span> 
    </td> 
    <th>Some text</th> 
    <td class="align"> 
     <span class="otherStyle">12</span>/<span class=" someStyle">26</span> 
    </td> 
    </tr> 
    <tr> 
    <th>Some text</th> 
    <td class="align"> 
     <span class=" someStyle">13</span>/<span class="otherStyle">27</span> 
    </td> 
    <th>Some text</th> 
    <td class="align"> 
     <span class=" someStyle">14</span>/<span class="otherStyle">28</span> 
    </td> 
    </tr> 
</table>

的JavaScript：

var myTbl = document.getElementsByClassName("myTable")[0]; 

var tSomeStyleClasses = myTbl.getElementsByClassName("someStyle"); 
console.log(tSomeStyleClasses); 
for (i=0;i<tSomeStyleClasses.length;i++) { 
    console.log(tSomeStyleClasses[i].classList); 
    //tSomeStyleClasses[i].classList.remove("someStyle"); 
} 

var tOtherStyleClasses = myTbl.getElementsByClassName("otherStyle"); 
console.log(tOtherStyleClasses); 
for (i=0;i<tOtherStyleClasses.length;i++) { 
    console.log(tOtherStyleClasses[i].classList); 
    //tOtherStyleClasses[i].classList.remove("otherStyle"); 
}

並檢查控制檯日誌。每個有10個條目，someStyle和otherStyle。現在取消//tSomeStyleClasses[i].classList.remove("someStyle");和//tOtherStyleClasses[i].classList.remove("otherStyle");並運行小提琴。再次檢查控制檯日誌。應該刪除2 x 10個樣式，但是隻能刪除5個樣式。我想知道爲什麼？

來源

2017-03-05 Tomo

從.getElementsByClassName()返回的值是活 NodeList。它是「活的」意味着當您更改列表中的元素時，列表本身會自動更新。因此，當你刪除你用來查找元素的類時，列表變短。因爲您正在迭代數字索引，所以最終會跳過元素。

一個好辦法對付那就是使用一個簡單的while循環，直到列表爲空列表的第一個元素只能操作：

var tSomeStyleClasses = myTbl.getElementsByClassName("someStyle"); 

while (tSomeStyleClasses.length) { 
    tSomeStyleClasses[0].classList.remove("someStyle"); 
}

來源

2017-03-05 15:48:33 Pointy

@ T.J。 Crowder和Pointy，謝謝你幫助我。 – Tomo

因爲getElementsByClassName給你一個現場列表的匹配元素。當您從索引0處的元素中刪除類時，將立即更新列表以從列表中刪除該元素，並將所有其他元素向下移動。由於您隨後增加了i，因此索引0處的元素現在爲未得到處理。

或者：

您的工作方式在列表中落後，或
使用document.querySelectorAll(".someStyle")，返回快照列表，而不是一個人住一間

來源

2017-03-05 15:48:53

3.或者''while'循環建議Pointy。 :-D –

我一直很想知道，瘋狂的天才首先提出了「活」節點列表的想法，因爲它真的很不尋常。 – Pointy

@Pointy :-)是的。當瀏覽器慢得多時，如果代碼需要跟蹤操作中的事情，它會提高效率。此外，有些瀏覽器維護這些列表*無論如何*，所以它是有效的只是返回現有的列表，而不是快照。（'getElementsByTagName（「a」）=== getElementsByTagName（「a」）'是true）但正如你所說，相當不尋常，容易讓人困惑。 –

的Javascript classList.remove不能正常工作

回答

相關問題