Frage getElementsByClassName vs. getElementById

[Sebashan]

Moin,

soweit ich es verstanden habe, liegt der Unterschied in der Nutzung von <id> oder <class> darin, dass ich <id> nur einmal je Seite nutzen kann. <class> wiederum mehrmals. Nun habe ich folgendes: Nutze ich <id>, dann funktioniert das hovern, warum aber nicht bei der Nutzung von <class>??

<td><img src="../img/B_off.JPG" id="hovern" onmouseover="over();" onmouseout="out();"/></td>

function over() {
    document.getElementById('hovern').src="../img/B_on.JPG";
}
function out(){
    document.getElementById('hovern').src="../img/B_off.JPG";
}

Folgender Code funktioniert nicht:

<td><img src="../img/B_off.JPG" class="hovern" onmouseover="over();" onmouseout="out();"/></td>

function over() {
    document.getElementsByClassName('hovern').src="../img/B_on.JPG";
}
function out(){
    document.getElementsByClassName('hovern').src="../img/B_off.JPG";
}

 

[Oliver77]

  document.getElementsByClassName('hovern')[0].src="../img/B_on.JPG";

Du kriegst ja mehrere Elemente.
Nimm doch:

document.querySelector(".example");

 

[zorro]

Übergib doch this

onmouseout="out(this);"

function out(el){
  el.src="bild.png"
}