W skrypcie JavaScript zastosowano metodę DOM getElementsByClassName('akapit'). Metoda ta odwoła się do akapitu
<p>akapit</p>
class.<p id="akapit">akapit2</p>
id="akapit" znajduje getElementById().<p href="akapit">akapit3</p>
href należy do odnośników; metoda sprawdza atrybut class.<p class="akapit">akapit4</p>
akapit, a tej wartości szuka metoda.Pytanie z egzaminu CKE, czerwiec 2019 (arkusz EE.09-X-19.06).
Metoda getElementsByClassName('akapit') wyszukuje elementy po wartości atrybutu class, więc znajdzie akapit <p class="akapit">akapit4</p>. Zwraca kolekcję, bo klasę może mieć wiele elementów naraz, dlatego do pierwszego elementu sięga się indeksem: document.getElementsByClassName('akapit')[0].
Element może mieć kilka klas oddzielonych spacją (class="akapit wazny") i metoda znajdzie go po każdej z nich. Kolekcja jest „żywa”: gdy skrypt doda klasę innemu elementowi, pojawi się on w niej automatycznie. Nowszy, uniwersalny odpowiednik to document.querySelectorAll('.akapit').
Przykład użycia: document.getElementsByClassName('akapit')[0].style.color = 'red'; zmienia kolor tekstu pierwszego akapitu z tą klasą.
Wszystkie akapity zawierają słowo „akapit”, ale tylko w jednym jest ono wartością atrybutu class. Akapit <p id="akapit"> ma identyfikator, a identyfikatory wyszukuje getElementById(). Pomylenie id z class to najczęstszy błąd w tym zadaniu.
W akapicie <p>akapit</p> słowo jest jedynie treścią, a metoda nie przeszukuje tekstu elementów, tylko ich atrybuty.
Zapis <p href="akapit"> zawiera atrybut href, który należy do odnośników <a> i w akapicie nie ma żadnego znaczenia. Nazwa metody mówi wprost, czego szuka: „ClassName”, czyli nazwy klasy. Dlatego jedynym akapitem, do którego odwoła się metoda, jest <p class="akapit">akapit4</p>.
Dobra metoda na takie zadania: z nazwy metody odczytaj atrybut, którego szuka (Id, ClassName, Name, TagName), a potem znajdź element, w którym właśnie ten atrybut ma podaną wartość.