<body> <p>pierwszy paragraf</p> <p>drugi paragraf</p> <p>trzeci paragraf</p> … W języku JavaScript należy odwołać się do elementu zawartego w...
<body> <p>pierwszy paragraf</p> <p>drugi paragraf</p> <p>trzeci paragraf</p> …W języku JavaScript należy odwołać się do elementu zawartego w pierwszym paragrafie przedstawionego fragmentu strony HTML. Można to wykonać za pomocą funkcji
A.
getElement("p");
B.
getElementsByClassName("p.1")[0];
C.
getElementsByTagName("p")[0];
D.
getElementById("p1");
Pytanie z egzaminu CKE, czerwiec 2018 (arkusz E.14-X-18.06).
Wybranie getElementsByTagName('p')[0] jest właściwe, bo w pokazanym fragmencie paragrafy nie mają ani identyfikatorów id, ani klas CSS. Jedyną pewną cechą, po której można je znaleźć, jest nazwa znacznika p. Metoda getElementsByTagName('p') zwraca kolekcję wszystkich elementów p występujących w dokumencie, w kolejności takiej, jak są zapisane w HTML. Ponieważ indeksowanie w JavaScripcie zaczyna się od 0, pierwszy paragraf znajduje się pod indeksem [0]. W praktycznym kodzie najczęściej zapisze się to jako document.getElementsByTagName('p')[0], bo metoda jest wywoływana na obiekcie document albo na konkretnym elemencie DOM. To zgodne z modelem DOM, czyli standardowym sposobem reprezentowania strony HTML jako drzewa obiektów. Moim zdaniem warto od razu zapamiętać też nowszą i często wygodniejszą składnię: document.querySelector('p'), która zwróci pierwszy pasujący paragraf. Jednak w kontekście podanych odpowiedzi poprawna jest właśnie metoda pobierająca elementy po nazwie znacznika i odwołanie do pierwszego elementu kolekcji.
W tym zadaniu łatwo pomylić kilka podobnie brzmiących metod DOM, ale różnice są dość istotne. Zapis getElement('p') nie jest standardową metodą obiektu document w JavaScripcie używanym w przeglądarce. DOM udostępnia konkretne metody, takie jak getElementById, getElementsByTagName, getElementsByClassName czy querySelector. Samo „getElement” brzmi logicznie, ale przeglądarka takiej funkcji po prostu nie rozpozna, chyba że ktoś wcześniej sam ją zdefiniował, a tu nie o to chodzi. Użycie getElementById('p1') też nie pasuje do podanego HTML, bo żaden paragraf nie ma atrybutu id='p1'. Identyfikator musi być jawnie wpisany w znaczniku, na przykład p id='p1'. Nie można zakładać, że pierwszy paragraf automatycznie dostaje nazwę p1, bo HTML tak nie działa. Problem jest też z getElementsByClassName('p.1')[0]. Ta metoda wyszukuje elementy po klasie CSS, a w kodzie nie ma żadnego atrybutu class. Dodatkowo 'p.1' wygląda bardziej jak źle zrozumiany selektor CSS, a nie nazwa klasy przekazywana do getElementsByClassName. Do tej metody podaje się samą nazwę klasy, bez kropki. Typowy błąd myślowy polega tu na mieszaniu znacznika p, identyfikatora id, klasy CSS i selektora. W DOM trzeba jasno wiedzieć, po czym szukamy elementu: po nazwie tagu, po id, po klasie albo przez selektor CSS. W pokazanym fragmencie mamy tylko znaczniki p, więc sensowne jest pobranie kolekcji paragrafów i wybranie elementu z indeksem 0.