为什么我的变量在更改另一个变量的显示后变为未定义？

Question

我试图隐藏特定唯一 ID 下的某些行。示例：

<tbody id="row0">
  <tr class="state0"></tr>
  <tr class="state1"></tr>
  <tr class="state2"></tr>
  <tr class="state3"></tr>
</tbody>

我可以找到一个特定的行：

var state0 = document.getElementById('row0').getElementsByClassName('state0');
var state1 = document.getElementById('row0').getElementsByClassName('state1');

然后像这样隐藏两行：

for (let index in state0) {state0[index].style.display = 'none'}
for (let index in state1) {state1[index].style.display = 'none'}

一旦我隐藏了 state0 的行，最终得到一个错误，指出 state1 不再被定义。每当我隐藏一行时，就会发生这种情况，即使在我再次通过 id 直接获取元素之后，下一行最终还是未定义的。谁能帮我解释一下为什么会这样？

Answer 1

<tbody id="row0">
  <tr class="state0"></tr>
  <tr class="state1"></tr>
  <tr class="state2"></tr>
  <tr class="state3"></tr>
</tbody>

var state0 = document.querySelector('#row0 > .state0');
var state1 = document.querySelector('#row0 > .state1');

state0.style.dysplay = 'none';
state1.style.dysplay = 'none';

此外，

for (index in state0) {
   // index will be a property of the state0 object
   // state0 is not an array and has other properties than child indices, for example length, item, namedItem ...
   // state0['length'] have not property 'style'
}

您可以使用

for (var i = 0; i <state0.length; i ++) {
   var indexOfChild = state0 [i];
   ...
}

为什么我的变量在更改另一个变量的显示后变为未定义？

Why does my variable become undefined after changing display of another variable?

javascript

loops

undefined

getelementbyid

getelementsbyclassname