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 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
<!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 nachxml:id
in XML-Dokumenten.