Signatur
Beschreibung
Die Methode getElementById() des Document-Interfaces gibt ein Element-Objekt zurück, das das Element repräsentiert, dessen id-Eigenschaft mit dem angegebenen String übereinstimmt. Da Element-IDs, sofern angegeben, eindeutig sein müssen, sind sie eine nützliche Möglichkeit, um schnell auf ein bestimmtes Element zuzugreifen.
Wenn Sie auf ein Element zugreifen müssen, das keine ID besitzt, können Sie querySelector() verwenden, um das Element mit einem beliebigen selector zu finden.
Im Gegensatz zu einigen anderen Methoden zur Elementsuche wie Document.querySelector() und Document.querySelectorAll() ist getElementById() nur als Methode des globalen document-Objekts verfügbar und nicht als Methode auf allen Element-Objekten im DOM. Da ID-Werte im gesamten Dokument eindeutig sein müssen, besteht kein Bedarf für „lokale" Versionen der Funktion.
Wenn kein Element mit der angegebenen id existiert, gibt diese Funktion null zurück. Beachten Sie, dass der Parameter id case-sensitive ist, sodass document.getElementById("Main") null zurückgibt statt des Elements <div id="main">, weil „M" und „m" für diese Methode unterschiedlich sind.
Elemente, die nicht im Dokument enthalten sind, werden von getElementById() nicht durchsucht. Wenn Sie ein Element erstellen und ihm eine ID zuweisen, müssen Sie das Element mit Node.insertBefore() oder einer ähnlichen Methode in den Dokumentbaum einfügen, bevor Sie mit getElementById() darauf zugreifen können.
In Nicht-HTML-Dokumenten muss die DOM-Implementierung Informationen darüber besitzen, welche Attribute vom Typ ID sind. Attribute mit dem Namen „id" sind nicht vom Typ ID, es sei denn, dies ist in der DTD des Dokuments so definiert. Das id-Attribut ist in den häufigen Fällen von XHTML, XUL und anderen als vom Typ ID definiert. Von Implementierungen, die nicht wissen, ob Attribute vom Typ ID sind oder nicht, wird erwartet, dass sie null zurückgeben.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $id Pflicht | string | — | Die ID des zu findenden Elements. Die ID ist ein case-sensitiver String, der innerhalb des Dokuments eindeutig ist; nur ein Element sollte eine bestimmte ID haben. |
Rückgabewert
Element-Objekt, das das DOM-Element mit der angegebenen ID beschreibt, oder null, wenn kein passendes Element im Dokument gefunden wurde.Beispiele
JavaScript
function changeColor(newColor) {
const elem = document.getElementById("para");
elem.style.color = newColor;
}
document.querySelectorAll("button").forEach((button) => {
button.addEventListener("click", (event) => {
changeColor(event.target.textContent.toLowerCase());
});
});Element muss im Dokument eingefügt sein
const element = document.createElement("div");
element.id = "test";
const el = document.getElementById("test"); // el will be null!// Wichtig · Fallstricke
IDs sollten innerhalb eines Dokuments eindeutig sein. Wenn zwei oder mehr Elemente in einem Dokument dieselbe ID haben, gibt diese Methode das erste gefundene Element zurück.
Die Groß-/Kleinschreibung von "Id" im Namen dieser Methode muss korrekt sein, damit der Code funktioniert; getElementByID() ist nicht gültig und funktioniert nicht, so natürlich es auch erscheinen mag.