Kwalifikacje w Zawodzie - Testy zawodowe online | Egzaminy Zawodowe

KWALIFIKACJA INF3 - TEST WIEDZY NR 3



PYTANIE NR 36.
Rozważ następujący fragment kodu JavaScript: 
let element = document.querySelector('.myClass');
element.classList.add('newClass');
Co zostanie wykonane przez powyższy kod?
A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
document.querySelector('.myClass') zwraca pierwszy element w DOM pasujący do selektora CSS .myClass. Następnie classList.add('newClass') dopisuje do jego listy klas nową klasę, nie usuwając dotychczasowych. Kod nie działa na wszystkich elementach i niczego nie "zamienia".

Pełne wyjaśnienie:

Kod składa się z dwóch kroków:

  • Wyszukanie elementu: document.querySelector('.myClass') przyjmuje selektor CSS i zwraca pierwszy pasujący element (pierwsze dopasowanie podczas przeszukiwania dokumentu). Nie zwraca kolekcji.
  • Modyfikacja klas: element.classList.add('newClass') dodaje wskazaną klasę do atrybutu class tego elementu. Jest to operacja "dopisz", czyli nie usuwa istniejących klas.

Dlatego poprawny opis działania brzmi: dodanie klasy newClass do pierwszego elementu posiadającego klasę myClass.

Dlaczego pozostałe odpowiedzi są błędne?

  • "Do wszystkich elementów" – to byłoby prawdziwe przy użyciu document.querySelectorAll('.myClass') i iteracji po wynikach. Tu użyto querySelector, który zwraca tylko jeden element.
  • "Zmienia nazwę klasy myClass na newClass" – zmiana/"podmiana" wymagałaby usunięcia starej klasy i dodania nowej (np. classList.remove('myClass') + add) albo użycia classList.replace('myClass','newClass'). W podanym kodzie jest wyłącznie add.
  • "Usuwa myClass i dodaje newClass" – to opis dwóch operacji. W kodzie nie ma żadnego remove, więc klasa myClass pozostaje, a newClass jest tylko dopisana.

Wskazówka egzaminacyjna: zawsze rozróżniaj metody zwracające jeden element (querySelector) od tych zwracających listę (querySelectorAll), oraz operacje na klasach: add (dopisz), remove (usuń), toggle (przełącz), replace (zamień).

Dodatkowe pytania

Dodatkowe pytania (FAQ):
Co robi document.querySelector('.myClass') w JavaScript?
Zwraca pierwszy element w dokumencie, który pasuje do podanego selektora CSS .myClass. Jeśli nie znajdzie dopasowania, zwróci null. Nie zwraca listy elementów, tylko pojedynczy obiekt DOM.
Jaka jest różnica między querySelector a querySelectorAll?
querySelector zwraca jeden (pierwszy) element pasujący do selektora. querySelectorAll zwraca kolekcję (NodeList) wszystkich dopasowań, po której zwykle trzeba iterować. To częsta pułapka na egzaminach.
Co oznacza element.classList.add('newClass')?
To polecenie dopisuje klasę newClass do atrybutu class wybranego elementu. Istniejące klasy pozostają bez zmian. Jeśli klasa już istnieje, nie zostanie dodana drugi raz (brak duplikatów).
Czy classList.add usuwa stare klasy elementu?
Nie. add tylko dodaje nową klasę do listy klas. Usuwanie realizuje się metodą remove, a zamianę można wykonać przez replace lub kombinację remove + add.
Dlaczego kod modyfikuje tylko pierwszy element z klasą myClass?
Bo użyto document.querySelector, który kończy wyszukiwanie po znalezieniu pierwszego dopasowania. Aby zmodyfikować wszystkie elementy, trzeba pobrać je przez querySelectorAll i wykonać dodanie klasy w pętli dla każdego elementu.
Co się stanie, jeśli element z klasą myClass nie istnieje?
querySelector zwróci null, a wtedy wywołanie null.classList spowoduje błąd wykonania (TypeError). W praktyce stosuje się sprawdzenie, np. if (element) { ... }, aby zabezpieczyć kod.
Jak dodać klasę do wszystkich elementów z daną klasą?
Użyj document.querySelectorAll('.myClass'), a potem iteruj po wynikach, np. pętlą for...of lub forEach, i wywołuj el.classList.add('newClass') dla każdego elementu.
Jak usunąć klasę myClass i dodać newClass w JavaScript?
Wykonuje się dwie operacje na classList: najpierw remove('myClass'), potem add('newClass'). Alternatywnie można użyć replace('myClass','newClass'), jeśli chcesz jednocześnie zamienić jedną klasę na drugą.
Jakie są typowe błędy w zadaniach o classList na egzaminie INF.3?
Najczęściej myli się działanie querySelector z querySelectorAll (jeden vs wiele elementów) oraz znaczenie metod: add (dodaj) vs toggle (przełącz) vs replace (zamień). Warto czytać dokładnie nazwę metody.
Dlaczego warto używać classList zamiast modyfikować className?
classList jest bezpieczniejsze i wygodniejsze: dodajesz/usuwasz konkretne klasy bez ryzyka nadpisania innych. Przy className łatwo przypadkowo usunąć istniejące klasy lub wprowadzić błędy w odstępach, co wpływa na stylowanie.
info

Około 57% zdających odpowiada poprawnie na to pytanie. średnie

Według specjalistów z branży: "document.querySelector('.myClass') zwraca pierwszy element w DOM pasujący do selektora CSS .myClass."

Źródła:

  • MDN Web Docs: Document.querySelector() - https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector (dostęp: 2026-02-18)
  • MDN Web Docs: Element.classList - https://developer.mozilla.org/en-US/docs/Web/API/Element/classList (dostęp: 2026-02-18)
  • MDN Web Docs: DOMTokenList.add() - https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/add (dostęp: 2026-02-18)

Materiały:

  • Dokumentacja MDN: querySelector i selektory CSS
  • Dokumentacja MDN: Element.classList oraz metody add/remove/toggle
  • Ćwiczenia praktyczne z manipulacji DOM w czystym JavaScript
Zobacz też:

Aktualizacja pytania: 31.03.2026



Aktualizacja pytania: 31.03.2026
📡 Brak połączenia internetowego