Wie Klasse für alle Elemente geändert werden, die von document.getElementsByClassName abgerufen werden

Question

Ich habe eine Tabelle, die 3 Zeilen enthält. Jede Zeile hat die Klasse: .myClass.

I-Abfrage für die Tabellenzeilen dann mit document.getElementsByClassName('myClass') und iterieren über die Elemente, jede Zeile der Klasse .otherClass ändern. Jedoch

,

console.log(document.getElementsByClassName('otherClass')) 

ergab nur eine Zeile.

Und als ich das DOM betrachtete, hatte nur die erste .myClass Zeile ihre Klasse geändert in .otherClass; der andere blieb unberührt. Wie kann ich die Klasse aller .myClass Zeilen in ändern?

var c = document.getElementsByClassName('myTable')[0]; 
 
var x = c.getElementsByClassName('myClass'); 
 

 
for (var i = 0; i < x.length; i++) { 
 
    x[i].className = 'otherClass'; 
 
} 
 

 
x = c.getElementsByClassName('otherClass'); 
 

 
console.log(x); // only one element

<table class="myTable"> 
 
    <tr class="myClass2"> 
 
    <td>Content</td> 
 
    <td>Content</td> 
 
    </tr> 
 
    <tr class="myClass"> 
 
    <td>Content</td> 
 
    <td>Content</td> 
 
    </tr> 
 
    <tr class="myClass"> 
 
    <td>Content</td> 
 
    <td>Content</td> 
 
    </tr> 
 
</table>

Answer 1

getElementsByClassName, wie andere HTML-Sammlungen, "live" ist, das heißt, wenn Sie eine anderen Klassennamen sein Mitglied zuweisen, wird es aus der Sammlung on the fly entfernt und seine Länge wird dekrementiert. Aus diesem Grund wird Ihre Schleife nur einmal ausgeführt.

var x = document.getElementsByClassName('myClass'); 
 
alert("before: " + x.length); 
 
x[0].className='otherClass'; 
 
alert("after: " + x.length);

.myClass { color: black } 
 
.otherClass { color: red }

<b class="myClass">hi</b> 
 
<b class="myClass">hi</b>

Docs:

Ein HTMLCollection im HTML-DOM ist leben; Es wird automatisch aktualisiert, wenn das zugrunde liegende Dokument geändert wird.

---

Um in Zusammenhang zu Ihrer Frage zu beantworten, können Sie den Klassenname des ersten Elements einstellen könnte, bis es in der Sammlung keine mehr übrig sind:

while(x.length > 0) { 
    x[0].className = 'otherClass'; 
} 

Answer 2

Als georg pointed out in his answer, getElementsByClassName gibt eine "live" Sammlung . Das bedeutet, dass das Array "aktualisiert" wird, wenn sich die Elemente ändern.

Um Ihr Problem zu beheben, sollten Sie eine While-Schleife verwenden, iterieren, während x.length existiert, und nur das erste Element der HTMLCollection ändern.

var c = document.getElementsByClassName('myTable')[0]; 
 
var x = c.getElementsByClassName('myClass'); 
 
while (x && x.length) { 
 
    x[0].className = 'otherClass' 
 
} 
 
var y = c.getElementsByClassName('otherClass'); 
 
alert(y.length);

.myClass { 
 
    display:block; 
 
    background-color: red; 
 
} 
 
.otherClass { 
 
    display:block; 
 
    background-color:green; 
 
}

<table class="myTable"> 
 
<tr class="myClass2"> 
 
<td>Content</td> 
 
<td>Content</td> 
 
</tr> 
 
<tr class="myClass"> 
 
<td>Content</td> 
 
<td>Content</td> 
 
</tr> 
 
<tr class="myClass"> 
 
<td>Content</td> 
 
<td>Content</td> 
 
</tr> 
 
<table>

Answer 3

Georg ist richtig. Das Elementarray wird im laufenden Betrieb aktualisiert, sodass Sie sich nicht auf seine Länge verlassen können.

Versuchen Sie diesen Code:

var c = document.getElementsByClassName('myTable')[0], 
    x = c.getElementsByClassName('myClass'); 

while (x.length) { 
    x[0].className = 'otherClass'; 
} 
var y = c.getElementsByClassName('otherClass'); 
alert(y.length); 

Working fiddle