Dokument: getElementById()-Methode

Die getElementById()-Methode des Document-Interfaces gibt ein Element-Objekt zurück, das das Element darstellt, dessen id-Eigenschaft mit dem angegebenen String übereinstimmt. Da Element-IDs, wenn sie angegeben werden, einzigartig sein müssen, sind sie eine nützliche Möglichkeit, schnell auf ein bestimmtes Element zuzugreifen.

Wenn Sie Zugriff auf ein Element benötigen, das keine ID hat, können Sie querySelector() verwenden, um das Element mit einem beliebigen Selektor zu finden.

Hinweis: IDs sollten innerhalb eines Dokuments eindeutig sein. Wenn zwei oder mehr Elemente in einem Dokument die gleiche ID haben, gibt diese Methode das erste gefundene Element zurück.

Syntax

getElementById(id)

Hinweis: Die Großschreibung von "Id" im Namen dieser Methode muss korrekt sein, damit der Code funktioniert; getElementByID() ist nicht gültig und wird nicht funktionieren, so natürlich es auch erscheinen mag.

Parameter

id: Die ID des zu findenden Elements. Die ID ist ein groß-/kleinschreibungssensitiver String, der innerhalb des Dokuments eindeutig ist; nur ein Element sollte eine gegebene ID haben.

Rückgabewert

Ein Element-Objekt, das das DOM-Element beschreibt, das mit der angegebenen ID übereinstimmt, oder null, wenn kein übereinstimmendes Element im Dokument gefunden wurde.

Beispiele

HTML

html

<html lang="en">
  <head>
    <title>getElementById example</title>
  </head>
  <body>
    <p id="para">Some text here</p>
    <button onclick="changeColor('blue');">blue</button>
    <button onclick="changeColor('red');">red</button>
  </body>
</html>

JavaScript

function changeColor(newColor) {
  const elem = document.getElementById("para");
  elem.style.color = newColor;
}

Ergebnis

Verwendungshinweise

Im Gegensatz zu einigen anderen Methoden zur Element-Suche 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, gibt es keine Notwendigkeit für "lokale" Versionen der Funktion.

Beispiel

html

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <div id="parent-id">
      <p>hello word1</p>
      <p id="test1">hello word2</p>
      <p>hello word3</p>
      <p>hello word4</p>
    </div>
    <script>
      const parentDOM = document.getElementById("parent-id");
      const test1 = parentDOM.getElementById("test1");
      // throw error
      // Uncaught TypeError: parentDOM.getElementById is not a function
    </script>
  </body>
</html>

Wenn es kein Element mit der angegebenen id gibt, gibt diese Funktion null zurück. Beachten Sie, dass der id-Parameter groß-/kleinschreibungssensitiv ist, daher wird document.getElementById("Main") null zurückgeben, anstatt dem Element <div id="main">, da "M" und "m" für diese Methode unterschiedlich sind.

Elemente, die sich nicht im Dokument befinden, 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:

const element = document.createElement("div");
element.id = "test";
const el = document.getElementById("test"); // el will be null!

In Nicht-HTML-Dokumenten muss die DOM-Implementierung Informationen darüber haben, welche Attribute vom Typ ID sind. Attribute mit dem Namen "id" sind nicht vom Typ ID, es sei denn, sie sind im DTD des Dokuments so definiert. Das id-Attribut ist für die gängigen Fälle von XHTML, XUL und anderen als vom Typ ID definiert. Implementierungen, die nicht wissen, ob Attribute vom Typ ID sind oder nicht, erwarten, dass null zurückgegeben wird.

Spezifikationen

Specification
DOM Standard # ref-for-dom-nonelementparentnode-getelementbyid②

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

Document-Referenz für andere Methoden und Eigenschaften, die Sie verwenden können, um Referenzen zu Elementen im Dokument zu erhalten.
Document.querySelector() für Selektoren über Abfragen wie 'div.myclass'.
Document.evaluate() - hat eine Dienstprogrammmethode zur Auswahl nach xml:id in XML-Dokumenten.