Metoda HTML DOM Document getElementById()

Definicja i użycie

getElementById() Metoda zwróci element o określonej wartości id.

Jeśli element nie istnieje:getElementById() Metoda zwróci null.

getElementById() Metoda jest jedną z najczęściej używanych w HTML DOM. Prawie każdorazowo, gdy chcesz odczytać lub edytować element HTML, używasz jej.

Uwaga

Każdy id powinien być unikalny, ale:

Jeśli istnieje dwa lub więcej elementów o tym samym id: getElementById() Zwraca pierwszy.

Zobacz również:

Metoda getElementsByTagName()

Metoda getElementsByClassName()

Metoda querySelector()

Metoda querySelectorAll()

Przykład

Przykład 1

Uzyskaj element o określonym id:

document.getElementById("demo");

Spróbuj sam!

Przykład 2

Uzyskaj element i zmień jego kolor:

const myElement = document.getElementById("demo");
myElement.style.color = "red";

Spróbuj sam!

Przykład 3

albo zmień tylko jego kolor:

document.getElementById("demo").style.color = "red";

Spróbuj sam!

Gramatyka

document.getElementById(elementId)

Parametry

Parametry Opis
elementId Wymagane. Wartość id elementu.

Zwracana wartość

Typ Opis
obiekt

elementy o zdefiniowanym id.

Jeśli nie znaleziono, zwraca null.

Szczegółowe informacje techniczne

getElementById() metoda jest ważną i często używaną metodą, ponieważ dostarcza łatwy sposób uzyskania obiektu Element reprezentującego określony element dokumentu.

metoda będzie szukać elementu o wartości atrybutu id elementId węzłów Element i zwraca jeden z nich. Jeśli nie znajduje takiego elementu, zwraca null. Wartość atrybutu id jest unikalna w dokumencie, jeśli metoda znajduje wiele elementów o zdefiniowanym elementId węzeł Element, który losowo zwraca taki węzeł, lub zwraca null.

Uwaga:Nazwa tej metody zaczyna się od Id zakończeniem, nie IDnie błędnie pisz!

W dokumencie HTML metoda zawsze zwraca atrybut o zdefiniowanym id. Używaj HTMLDocument.getElementByName() metoda, która wyszukuje elementy na podstawie wartości atrybutu name.

W dokumentach XML ta metoda jest używana do wyszukiwania elementów za pomocą dowolnej atrybutu o typie id, niezależnie od nazwy tego atrybutu. Jeśli typ atrybutu XML jest nieznany (np. parser XML zignorował lub nie mógł zlokalizować DTD dokumentu), metoda zawsze zwraca nullW klientowym JavaScriptie ta metoda rzadko jest używana z dokumentami XML.getElementById() Metoda pierwotnie została zdefiniowana jako członek interfejsu HTMLDocument, ale w późniejszych wersjach DOM 2 została przeniesiona do interfejsu Document.

Wsparcie przeglądarki

document.getElementById() jest cechą DOM Level 2 (2001).

Obsługiwane są wszystkie przeglądarki:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Wspierane 9-11 Wspierane Wspierane Wspierane Wspierane

Strony związane

Tutorial CSS:Gramatyka CSS

Podręcznik CSS:Wybieracz #id CSS

Podręcznik HTML DOM:Atrybut id HTML DOM

Podręcznik HTML DOM:Obiekt Style HTML DOM