document.
Zwraca element o podanym identyfikatorze (atrybucie id) albo null, gdy go nie ma.
- Zwraca
- Element o podanym
idalbonull.
Przykład
#const title = document.getElementById('title')
console.log(title)
console.log(title.textContent)
console.log(document.getElementById('#title'))
console.log(document.getElementById('Title'))Definicja i zastosowanie
#Metoda getElementById() zwraca element, którego atrybut id jest równy podanemu napisowi. Podajesz samą nazwę, bez znaku #, bo to nie jest selektor CSS. Wielkość liter ma znaczenie.
Identyfikator powinien być unikalny w całym dokumencie. Jeśli przez pomyłkę kilka elementów ma to samo id, metoda zwróci pierwszy z nich. Gdy elementu nie ma, wynikiem jest null.
To najstarszy i najprostszy sposób pobierania elementu. Działa tylko na obiekcie document, a nie na pojedynczych elementach. W nowszym kodzie równie często spotkasz document.querySelector("#id"), które daje ten sam wynik, ale przyjmuje dowolny selektor.
Składnia
#document.getElementById(id)Parametry
#id
napis
Wartość atrybutuidszukanego elementu, bez znaku#.
Więcej przykładów
#const points = document.getElementById('points')
points.textContent = Number(points.textContent) + 30
console.log(points.textContent)const byId = document.getElementById('start-btn')
const bySelector = document.querySelector('#start-btn')
console.log(byId === bySelector)Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Nie dodawaj
#przed nazwą.getElementById("#menu")szuka elementu zid="#menu"i zwrócinull. - Dbaj o unikalność
id. Powtórzone identyfikatory psują też etykiety formularzy i linki do sekcji strony. - Nie polegaj na tym, że przeglądarka tworzy globalne zmienne o nazwach identyfikatorów. Zawsze pobieraj elementy jawnie.
Powiązane hasła
#- document.querySelector()Zwraca pierwszy element pasujący do selektora CSS albo null, gdy nic nie pasuje.
- document.querySelectorAll()Zwraca statyczną listę (NodeList) wszystkich elementów pasujących do selektora CSS.
- Node.textContentOdczytuje lub ustawia cały tekst elementu, bez znaczników HTML.
- EventTarget.addEventListener()Rejestruje funkcję wywoływaną za każdym razem, gdy na elemencie wystąpi zdarzenie, np. kliknięcie.
Widzisz błąd albo brakuje przykładu? Napisz do nas.