getElementById – Zugriff über das id-Attribut

Zugriff auf Elemente des DOM

Und los geht das Angeln nach den Elementen. Dabei stehen heute viele Methoden zur Verfügung:

getElementById ist eine der ältesten und sichersten Methoden des DOM. Die Methode erfordert ein eindeutiges ID-Attribut, dass nur in einem einzigen HTML-Element vorkommen darf.

document.getElementById ('id')

<div id="header"> … <div>

getElementsByName ('name')

name-Attribut von Formularfeldern wie
<input type="radio" name="activ" value="active" /> aktiv
<input type="radio" name="activ" value="inactive" /> inaktiv

Diese Methoden gehören dem Element-Objekt und können sowohl für einen Elementknoten wie div oder form als auch für document aufgerufen werden.

getElementsByTagName ('tr')

alle tr-Tags unterhalb von node

node.getElementsByClassName ('class')

für alle <tagname class="box"> … <tagname>

querySelector

Zugriff auf ein Element über einfache und komplexe CSS-Selektoren

querySelectorAll

Zugriff auf alle Element mit einem bestimmten CSS-Selektor

document . getElementById (id)

Sucht das Element mit dem id-Attribut id. Am einfachsten ist der direkte Sprung zum Ziel – zu einem Element des document-Knotens mit einem ID-Attribut.

<div id="fix"></div>
…
if (document.getElementById('fix')) {
  document.getElementById('fix').innerHTML = "Hier ist das Element";
  document.getElementById('fix').style.color = "green";
} else {
  console.log('Kein Element mit id=fix');
}

Das Schöne am Zugriff auf Element mit der id: Wir müssen uns nicht um die Struktur des Dokuments kümmern und keinen Pfad vom Einstiegselement bis zum gewünschten Element finden.

Wichtig ist nur die Prüfung, ob ein Element mit der ID 'fix' auch wirklich existiert, damit – falls das Element nicht gefunden wird – kein Javascript-Fehler entsteht, der auch die Ausführung weiterer Funktionen behindern kann. getElementById gibt null zurück, wenn das Element nicht existiert.

Gibt es mehrere Elemente mit demselben id-Attribut, gibt getElementById das erste Element zurück.

Prüfen, ob element id existiert

Javascript darf sich nicht auf das HTML verlassen. Wenn kein Element mit der angegebenen id existiert, kommt es beim Zugriff zu einer Fehlermeldung.

let aberhallo = document.getElementById("aberhallo");
…
aberhallo.innerHTML = "16";        null is not an object oder aberhallo ist null oder Uncaught TypeError: Cannot set property 'innerHTML' of null

Der Fehler entsteht nicht bei der Definition der Variablen aberhallo, sondern beim ersten Zugriff. Prüfen mit try catch

let exists = true;
let aberhallo = document.getElementById("aberhallo");
try {
    if (aberhallo) exists = true;
} catch (e) {
    exists = false;
}

if (exists) {
    aberhallo = 16;
}

oder in einer Kurzfassung und ganz explizit.

if ( document.getElementById('aberhallo') !== null ) { 
   console.log ("aberhallo " + aberhallo.innerHTML );
} else {
   console.log (" kein aberhallo ");
} 

getElementById vs querySelector

querySelector wird seit IE8 von allen gängigen Browsern unterstützt und kann alles ansprechen, was durch einen CSS-Selector erreicht wird.

getElementById () ist eine Methode des document-Objekts, während querySelector () sowohl eine Methode des document-Objekts als auch des Elements ist. Die Frage, ob besser querySelector oder getElementById ist mehr eine akademische Spielwiese als ein praktisches Kriterium.

Man könnte ins Feld räumen, dass getElementById schneller ist (insbesondere beim Verketten – Chaining), und besser aus dem Code heraussticht als querySelector. Aber eine id kommt nur einmal im Dokument vor, der Geschwindigkeitsvorteil wird sich beim Benutzer nicht niederschlagen.

let list = document.getElementById("node-217").getElementsByClassName("num");
let query = document.querySelectorAll ("#node-217 .num" );

Für querySelector spricht die Konsistenz und das intuitive Zusammenstellen eines CSS-Selektors.

Auf keinen Fall macht es Sinn, alle benötigten Element einer Seite mit Id auszustatten und bei Formularen gewinnt querySelector einen Blumentopf für

let color = document.querySelector ("input[name=option]:checked").value;

Am Ende läuft die Diskussion hinaus auf »Was ihr wollt«.

querySelector

Mit der breiten Unterstützung ist querySelector / querySelectorAll die konsistente Alternative zu

• getElementsByClassName ( "foo" ) querySelectorAll (".foo")
• getElementsByName ( "mail " ) querySelectorAll ("input[name='mail']")

querySelector / querySelectorAll kommen nah an jQuery $ und erreichen jedes Element im Dokument mit Hilfe von CSS Selektoren.