document.getElementById(id)

Sucht den Knoten 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 von einem Einstiegselement aus 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.

getElementsByTagName / getElementsByClassName

gibt eine NodeList aller Knoten mit dem Namen tagName bzw. class zurück (eine nodeList ähnelt einem Array). Tatsächlich gibt getElementsByTagName() Objekte mit der index- und length-Eigenschaft zurück, aber kein Array, so dass nicht alle Array-Methoden benutzt werden können.

length liefert die Anzahl der gefundenen Elemente, index gibt Zugriff auf die einzelnen Knoten.

getElementsByClassName und getElementsByTagName sind alte Methoden des DOM. – erreichen wir heute einfacher mit querySelector / querySelectorAll.

var allH3 = document.getElementsByTagName('h3');
var text = "";
var h3children; 
for (var i=0; i<allH3.length; i++) {
   h3children = allH3[i].childNodes;
   for (var j=0; j<h3children.length; j++) {
      if (h3children[j].nodeType == "3") {
         text = text + h3children[j].nodeValue + "
";
      }
   }
}
document.getElementById('h3list').innerHTML = text;

Nach dem Aufruf von var allH2 = document.getElementsByTagName('h2'); sind alle H2-Elemente dieses Dokuments im Array allH2 versammelt. allH2.length ist also die Anzahl der H2-Elemente, so dass die Inhalte der H2-Elemente in der Variablen text gelistet werden können.

Die H2-Elemente sind aber nur die Hülle für die Inhalte und erst die Textknoten unterhalb der H2-Elemente enthalten die Texte, die uns interessieren. Und wer sagt uns, dass der Autor nicht auch noch ein paar Elementknoten wie EM oder BR oder einen Anker <a id=""></a> in die Überschriften gesetzt hat?

Die erste Anweisung im for-Block sammelt alle Kindknoten des jeweiligen H2-Elements im Array h2children. Nur wenn ein Kindknoten ein Textknoten ist – if (h2children[j].nodeType == "3") – wird sein Wert in den Textstring aufgenommen. Der Einfachheit zuliebe unterschlägt das Skript also Inhalte von Elementknoten, die eventuell unter den H2-Elementen hängen.

Wer eher pragmatisch veranlagt ist und den Pfad des reinen DOM kurz verlassen mag, kann die H2-Elemente kurzerhand mit der Eigenschaft innerHTML auslesen.

var allH2 = document.getElementsByTagName('h2');
var text = "";
var h2children; 
for (var i=0; i<allH2.length; i++) {
   text = text + allH2[i].innerHTML + "\n";
}
alert(text);

document.getElementsByName(name)

gibt ein Array aller Knoten mit name-Attribut name.

Das name-Attribut in Formularen kodiert Name-/Wertpaare für eine Anwendung (meist PHP auf dem Server) und ist in der Regel eindeutig – ähnlich dem id-Attribut. Die Ausnahme bildet INPUT-Elemente vom Typ radio, in denen ein gemeinsames name-Attribut eine zusammengehörige Gruppe von Radiobuttons identifiziert, aber auch ein <input type="submit" name="submit" … /> kann mehrfach im Dokument vorkommen – z.B. als Button „Speichern“ und „Vorschau“.

var cols = document.getElementsByName('color');
for (var i=0; i<cols.length; i++) {
   cols[i].onchange = function () {
      console.log ('Farbe ' +  this.getAttribute('value'));
      …
   }
}

Die erste Anweisung liest alle Elemente, in denen name="color" notiert ist, in das Array cols. Der for-Block durchläuft alle gefundenen Elemente setzt einen Event Handler, der feuert, wenn ein Radio-Button aktiviert wird.

querySelector

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

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

querySelector / querySelectorAll kommt nah an das geniale jQuery $ und erreicht jedes Element im Dokument mit Hilfe von CSS Selektoren.