JavaScript - document.getElementById für Class?

var x = document.getElementById('x').innerHTML;

Wie funktioniert diese Funktion, wenn man eine Klasse ansprechen will?

Answer 1

[Win7User]

oder die universelle Lösung, falls du einen Selektor ansprechen willst (Tag, Klasse, ID oder Kombination aus allen), wäre document.querySelector() passender. Anstelle von document kannst du jede beliebige DOM-Node verwenden. Diese Funktion gibt dir immer nur das erste Element zurück. Falls du mehrere haben willst (z.B. alle divs), musst du document.querySelectorAll() verwenden. Das funktioniert aber ganz genauso, nur dass eine NodeList anstatt der Node zurückgegeben wird.

Um eine Klasse anzusprechen, benutzt du den Klassen-Selektor (ein Punkt) und den Klassennamen:

document.querySelectorAll('.klassenname');

oder wenn du nur das erste Element brauchst

document.querySelector('.klassenname');

Falls du dich mit Selektoren noch nicht so gut auskennst, kannst du dir einmal Selectors Level 3 und Selectors Level 4 von W3.org angucken. Da findest du alles, was es dazu zu wissen gibt.

Answer 2

[Isendrak]

Wie funktioniert diese Funktion, wenn man eine Klasse ansprechen will?

Gar nicht.

Dafür gibts document.getElementsByClassName.

Beachte aber, dass diese Funktion ein Array von Elementen und nicht ein einzelnes Element zurückgibt.

Beispiel:

let elements = document.getElementsByClassName("foo");
for(let i = 0; i < elements.length; ++i){
    elements[i].innerHTML = "lorem ipsum";
}

P.S.: Sofern möglich vermeide die Verwendung von innerHTML.

Answer 3

[ChrisCat1, UserMod Light]

var x = document.getElementsByClassName("example");

https://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp