Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych
Jakie będzie działanie podanych instrukcji JavaScript?
| var elementy = document.getElementsByClassName("styl1"); for(var i = 0; i < elementy.length; i++) elementy[i].style.fontWeight = "bolder"; |
Odpowiedzi
Informacja zwrotna
Instrukcje JavaScript w pytaniu wykorzystują metodę getElementsByClassName aby pobrać kolekcję wszystkich elementów na stronie które posiadają przypisaną klasę styl1. Metoda ta zwraca obiekt typu HTMLCollection który przypomina tablicę i zawiera odniesienia do elementów DOM posiadających określoną klasę. Następnie za pomocą pętli for przechodzimy przez każdy z tych elementów i zmieniamy ich styl na bolder przypisując nową wartość do właściwości style.fontWeight. Dzięki temu każdy element w kolekcji zostaje zmodyfikowany i wyświetlany z pogrubioną czcionką. Takie podejście jest zgodne z dobrymi praktykami w zakresie manipulacji DOM w JavaScript gdyż jest to sposób efektywny i bezpośredni. Użycie klas do grupowania elementów HTML pozwala na jednoczesne stosowanie stylów i operacji na grupach elementów co jest kluczowe w dynamicznym modelu tworzenia stron internetowych. Warto zwrócić uwagę na fakt że nazwy klas są czułe na wielkość liter co oznacza że styl1 i Styl1 byłyby traktowane jako różne klasy.
Jednym z często popełnianych błędów jest założenie że metoda getElementsByClassName przypisuje styl wszystkim elementom na stronie. W rzeczywistości zwraca ona tylko te elementy które posiadają określoną klasę styl1. To ogranicza zakres działania funkcji wyłącznie do wybranych elementów z przypisaną klasą co jest istotne dla zrozumienia selektorów w JavaScript. Innym nieporozumieniem może być przekonanie że metoda działa podobnie do selektorów CSS takich jak ID gdzie tylko jeden element jest modyfikowany. W rzeczywistości metoda ta operuje na kolekcji elementów a nie na pojedynczym elemencie. Dodatkowo częstym błędem jest myślenie że getElementsByClassName działa jak querySelector który mógłby zwrócić tylko pierwszy napotkany element. To nieporozumienie może prowadzić do błędnych założeń na temat zakresu i efektu działania skryptu. Warto również pamiętać że manipulacja stylami poprzez bezpośrednie modyfikowanie właściwości style elementu często jest bardziej wydajna niż modyfikowanie arkuszy stylów CSS zwłaszcza w kontekście dynamicznego działania skryptów na stronie internetowej. Kluczowe jest zrozumienie jak różne metody selekcji i manipulacji dokumentem wpływają na działanie i wydajność aplikacji webowych oraz unikanie myślenia że jedna metoda selekcji jest uniwersalna dla wszystkich celów i przypadków użycia co jest istotne w profesjonalnym podejściu do programowania w JavaScript i pracy z DOM.