Come cambiare classe per tutti gli elementi recuperati da document.getElementsByClassName

Question

Ho una tabella che contiene 3 righe. Ogni riga ha la classe: .myClass.

Ho quindi richiesto le righe della tabella con document.getElementsByClassName('myClass') e iterato sugli elementi, modificando la classe di ciascuna riga su .otherClass.

Tuttavia,

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

restituito solo una riga.

E, quando ho guardato il DOM, solo la prima riga .myClass aveva la sua classe modificata in .otherClass; l'altro è rimasto intatto.

Come posso modificare la classe di tutte le righe .myClass su .otherClass?

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, come altre collezioni HTML, è "live", cioè quando si assegna un nome di classe al suo membro, viene rimossa dalla raccolta al volo e la sua lunghezza ottiene decrementato. Ecco perché il tuo ciclo viene eseguito solo una volta.

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:

un HTMLCollection nel DOM HTML è vivo; viene aggiornato automaticamente quando viene modificato il documento sottostante.

---

Per rispondere in un contesto alla tua domanda, è possibile impostare il className del primo elemento fino a quando non ce ne sono lasciati nella collezione:

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

Answer 2

Come georg pointed out in his answer, getElementsByClassName restituisce un insieme "live" . Ciò significa che l'array si "aggiornerà" man mano che gli elementi cambiano.

Per risolvere il problema, è necessario utilizzare un ciclo while, iterando mentre x.length esiste e modificare solo il primo elemento di HTMLCollection.

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 è giusto. Gli array di elementi sono aggiornati al volo, quindi non puoi dipendere dalla sua lunghezza;

provare questo codice:

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