Über HTML-Collections wie document.forms, document.images u.a. kann man auf einige wesentliche Elemente zugreifen. Dabei sind eine Vielzahl von Schreibweisen möglich, die aus früherer Zeit stammen und mitunter noch funktionieren. Aber damit wollen wir uns hier nicht beschäftigen.

Kann ich auf ein bestimmtes Element zugreifen anhand einer seiner Eigenschaften, dann ist mir ja klar, welches Element gemeint ist. Nehmen wir als Beispiel das folgende HTML-Element:

<div id="box" class="boxClass"> ... </div>

Dieses Element hat einen Tagnamen, einen Identifier (id) und eine CSS-Klasse - Eigenschaften, die es ermöglichen, gezielt auf dieses Element zuzugreifen.

Der Wert eines id-Attributs muss unikat sein und ist daher unverwechselbar.

const myClickObjekt = document.getElementById('box');

Die Konstante myClickObjekt wird so kurz und schmerzlos eine Referenz auf den gewünschten DOM-Knoten. Ganz klar, dass diese Art des Zugriffs wohl am meisten verwendet wird.

Zu beachten ist nur, das der Wert eines Attribut case sensitiv ist, also Groß-/Kleinschreibung unterschieden wird.

const myClickObjekt = document.getElementsByTagName('div')[0];

Elementnamen (bzw. Tag Names) sind nicht unikat, und es ist kaum zu erwarten, dass ein div nur einmal im Dokument vorkommt. Daher heißt die Methode auch getElementsByTagname und liefert eine Liste aller Knoten mit diesem Elementnamen.

Den gewünschten Knoten referenzieren mit einem Index; im Beispiel [0], was dem ersten div im Dokument entspricht. Sollte das gewünschte Element nicht das erste sein, ist der entsprechende Index anzugeben.

Diese Art des Zugriffs wird man wohl nur in Ausnahmefällen anwenden, vielleicht bei Custom Elements.

Der Tagname im Argument ist übrigens nicht case sensitiv, es ist also egal, ob wir 'div' oder 'DIV' angeben.

const myClickObjekt = document.getElementsByClassName('boxClass')[0];

Ein Zugriff anhand nur eines Klassennamens kann genauso wenig eindeutig sein wie ein Zugriff per Elementname, daher auch hier der Index, um einen gewünschten Knoten zu finden.

const myClickObjekt = document.querySelector('div.boxClass');

Es kann jeder sinnvolle CSS-Selektor verwendet werden, im Beispiel Elementname.Klassenname. Aber halt - ein CSS-Selektor muss nicht unikat sein! Daher liefert die Methode querySelector nur den ersten Knoten, auf den der Selektor zutrifft.

Natürlich kann man einen Selektor so spezifizieren, dass er eindeutig wird. Oder man wählt die folgende Möglichkeit.

Seltsam aber war: Elementnamen im Selektor sind nicht case sensitiv, Klassennamen dagegen schon!

const myClickObjekt = document.querySelectorAll('div.boxClass')[0];

Die Methode querySelectorAll liefert alle Knoten, auf den der Selektor zutrifft. Daher muss über den passenden Index der gewünschte Knoten ausgewählt werden. Bis auf diesen Unterschied gilt das zuvor Gesagte.

const snapShot = document.evaluate(
  '//body/div[1]', // XPath 
  document,        // contextNode
  null,            // namespaceResolver
  XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,   //resultType
  null,            // result, ev. vorgegebenes XPathResult-Objekt
);

let myClickObjekt = snapShot.snapshotItem(0);

Diese Zugriffsart ist zweifellos die aufwändigste.

Anhand eines XPath-Ausdrucks kann jeder beliebige Knoten gefunden werden, und nicht nur Elementknoten. Auch kann ein XPath-Pfad sehr genau und eindeutig formuliert werden. Wer sich mit XPath auskennt, weiß diese Möglichkeit auch zu schätzen und wird den Aufwand nicht scheuen.

Die Methode document.evaluate ist ein Hammer! Es können durch die Angabe des resultType unterschiedliche Arten von Ergebnissen angefordert werden.