ParentNode#
ParentNode.getElementById()#
Metoda getElementById() zwraca pierwszego potomka (będącego elementem) z określonym unikatowym identyfikatorem, który znajduje się w danym węźle (zgodnie z porządkiem drzewa). Jeśli węzeł nie posiada potomka spełniającego te wymagania to zwrócona zostanie wartość null.
Opis działania#
Samo wywołanie i poszczególne jego części najlepiej objaśnić na zapisie składniowym:
var element = parentNode.getElementById(elementId);gdzie poszczególne człony oznaczają:
- element - referencja do pierwszego potomka (elementu) z określonym identyfikatorem w danym węźle lub wartość
null. - parentNode - węzeł będący obiektem kontekstu.
- elementId - łańcuch znakowy reprezentujący unikatowy identyfikator w poszukiwanym potomku (elemencie) danego węzła.
Algorytm wywołania metody getElementById(elementId) nie jest skomplikowany. Dla lepszego zrozumienia tematu prezentuję go w całości:
- Zwróć pierwszy węzeł typu
Element, zgodnie z porządkiem drzewa, będący potomkiem dla obiektu kontekstu, którego unikatowym identyfikatorem jest elementId. Jeśli nie ma elementu spełniającego te wymagania to zwróć wartośćnull.
Wielkość znaków w unikatowym identyfikatorze przeszukiwanego elementu oraz w argumencie przekazanym do metody ma znaczenie, dotyczy to zarówno dokumentu XML jak i dokumentu HTML. Przykładowo polecenie document.getElementById("test") zwróci wartość null dla elementu reprezentowanego przez zapis znacznikowy <div id="Test"></div>.
Początkujący programiści powinni zwracać uwagę na poprawny zapis znaków "Id" w nazwie metody, próba wywołania metody za pomocą zapisu "getElementByID()" nie zadziała i zrzucony zostanie błąd. Więcej szczegółów związanych z kontrolowaniem unikatowego identyfikatora w elementach umieściłem w dziale "Podstawy - Elementy i atrybuty".
Metoda getElementById() to jedna z najważniejszych metod w całym DOM. Pozwala na bezpośredni dostęp do konkretnych elementów i w niektórych przypadkach może przyczynić się do ogólnej poprawy wydajności skryptów. Pech jednak chciał, że od samego początku udostępniono ją jedynie dla interfejsu Document. Prawda jest taka, że sztuczne ograniczanie jej zasięgu do jednego interfejsu jest niepraktyczne i kłopotliwe. Bardzo często można się złapać na próbie wykonania polecenia typu DocumentFragment.getElementById() czy Element.getElementById(), dotyka to głównie początkujących programistów, ale i zaawansowanym może się przytrafić.
Po wielu namowach (do których osobiście przyłożyłem rękę) najnowsza specyfikacja DOM4 zezwala na stosowanie metody getElementById() także w interfejsach DocumentFragment i Element, co zostało zrealizowane poprzez przeniesienie tej metody do interfejsu ParentNode. Najnowsze wersje przeglądarek internetowych już teraz pozwalają wywoływać metodę getElementById() na fragmentach dokumentów. Niestety w przypadku elementów pojawiły się nieoczekiwane komplikacje i cała sprawa powędrował na dalszy plan.
Prosty przykład:
<!DOCTYPE html>
<html>
<head>
<script>
function getId(whatId){
var element = document.getElementById(whatId);
var info = document.getElementById("info");
if (element){
info.innerHTML = "Dopasowany element: " + element
+ "<br>" + "Wartość atrybutu id elementu: " + element.id
+ "<br>" + "Tekstowa zawartość elementu: " + element.textContent;
}
else{
info.innerHTML = "Brak dopasowanego elementu: " + element;
}
}
</script>
</head>
<body>
<p id="test1">Pierwszy akapit z atrybutem id="test1".</p>
<p name="test2">Drugi akapit z atrybutem name="test2".</p>
<p id="test1">Trzeci akapit z atrybutem id="test1".</p>
<p>Kliknij konkretny przycisk by pobrać element o określonym ID.</p>
<input type="button" value="getElementById('test1')" onclick="getId('test1')">
<input type="button" value="getElementById('test2')" onclick="getId('test2')">
<input type="button" value="getElementById('Test1')" onclick="getId('Test1')">
<p style="color: blue;">Szczegółowe informacje dla pobranego elementu:</p>
<p id="info"></p>
</body>
</html>W przeszłości nawet z tak prostą metodą było wiele problemów. Starsze wersje przeglądarki IE (sprzed wydania 8) pozwalały kontrolować unikatowy identyfikator w elementach za pomocą atrybutów id oraz name. W dodatku nie rozróżniały one wielkości liter między argumentem przekazanym do metody a wartościami tych atrybutów. Od IE8 wszystko jest już w porządku.
Składnia Web IDL#
[NoInterfaceObject] interface ParentNode { Element? getElementById(DOMString elementId); }