為什么我不能更改已定義元素的className

Question

我只想刪除沒有某些類似jQuery框架的某些元素的一類。 首先，我嘗試使用for（... in ...），而不是將ist更改為for（var i ...），但是現在我發現，即使直接選擇也不起作用。

使用jQuery可以正常工作。 但這是...讓我們解釋一下jQuery的功能。

我的劇本：

[109] <script>
[110]   var hidden = document.getElementsByClassName('hidden');
[111]   console.log('Class "hidden" size: ' + hidden.length);
[112]   console.log(hidden[0].tagName);
[113]   console.log(hidden[1].tagName);
[114]
[115]   hidden[0].className = '';
[116]   hidden[1].className = '';
[117] </script>  

控制台日志：

Class "hidden" size: 2
H1
FORM
Uncaught TypeError: Cannot set property 'className' of undefined(anonymous function) @ login.html:116

為什么我可以獲取hidden[1]的tagName，但不能更改其className，但要更改為hidden[0] 。

當我將訂單更改為

[115]   hidden[1].className = '';
[116]   hidden[0].className = '';

所以hidden[1]在hidden[0]之前起作用。

看起來像var hidden = document.getElementsByClassName('hidden'); 當第一個選定的元素已更改且元素的length變小時，將第二次運行。

Answer 1

getElementsByClassName返回活動的 NodeList，這意味着它包含的元素隨DOM的變化而變化。 您從該集合中的元素中刪除了相關的類名，該元素將被自動從集合中刪除。

因此，您應該向后遍歷元素：

for ( var i = hidden.length - 1; i > -1; i-- ) {
  hidden[ i ].className = '';
}

在第一次迭代中，集合將包含2個元素（索引為0和1）。 您從索引為1的元素中刪除該類，並且該元素也從集合中刪除。 在下一次迭代中，集合中只剩下一個元素，但是由於i遞減為0，因此您可以正確地引用它。

編輯

如評論中所建議，您還可以反復修改hidden[0] ：

while ( hidden.length ) {
  hidden[ 0 ].className = '';
}