Klasyczne skrypty i DOM: wyszukiwanie elementów we właściwym momencie

Parser HTML odczytuje kod strony i buduje strukturę jej elementów. Klasyczny skrypt przetwarzany przez parser HTML, bez async i skutecznego defer, zatrzymuje dalsze parsowanie HTML na czas wykonania. Elementy zapisane dalej w źródle zwykle jeszcze nie istnieją w drzewie dokumentu (DOM). Moduły, skrypty asynchroniczne i skrypty dodawane dynamicznie działają według innych reguł.

To wyjaśnia typowy błąd zmiany motywu: przełącznik w nagłówku działa, ale przy pierwszym ładowaniu nie znajduje obrazów w dalszej części artykułu. Wszystkie pliki obrazów mogą już istnieć; wyszukiwanie następuje po prostu zbyt wcześnie.

Pozycja w źródle nie jest pomiarem wykonania

Pozycja bajtowa opisuje kolejność w dostarczonym HTML. Zliczenie znaczników otwierających nie daje automatycznie liczby istniejących elementów DOM: znaczenie mają komentarze, treść skryptów, elementy tworzone niejawnie oraz późniejsze zmiany. Wcześniejsze skrypty mogą też dodać kolejne elementy.

Między innymi dlatego właściwy test zapisuje document.readyState i rzeczywistą liczbę znalezionych elementów w chwili wykonania. Wcześniejsze rozmiary strony i liczby plików nie są tutaj przedstawiane jako odtworzone pomiary. Mechanizm pokazuje niewielki, izolowany przykład uruchomiony w przeglądarce.

Co wykazał test przeglądarkowy

W teście z 24 października 2026 dwa elementy figure występują po klasycznym skrypcie w sekcji head. Wczesne wyszukiwanie znajduje zero figur. Zewnętrzny skrypt klasyczny z defer oraz zwykły moduł znajdują później obie figury. Dodanie defer do osadzonego skryptu klasycznego nie opóźnia wykonania.

querySelectorAll() zwraca ponadto statyczną listę. Pusta lista zachowana wcześniej pozostaje pusta także po utworzeniu obu figur. Po parsowaniu potrzebne jest więc ponowne wyszukanie elementów. Sprawdzono izolowany przykład w Chromium, a nie zestaw różnych przeglądarek ani historyczny zapis ruchu sieciowego witryny.

Dlaczego późniejsze kliknięcie nie wystarcza

Kliknięcie po parsowaniu sprawdza zmianę stanu przy już istniejących elementach. Nie potwierdza poprawnego działania podczas pierwszego ładowania. Kliknięcie może też nastąpić jeszcze w trakcie ładowania, gdy przycisk jest już widoczny i ma zarejestrowaną obsługę zdarzenia.

Zapisany wybór jasnego motywu, ponowne ładowanie w ciemnym motywie i przełączenie podczas ładowania stanowią zatem osobne przypadki testowe. Przy każdej zamianie obrazów liczy się bieżący stan motywu. Istnienie elementów nagłówka nie dowodzi, że figury w dalszej części artykułu już powstały.

Zamiana obrazów po parsowaniu

Poniższy przykład integracji wymaga istniejącej funkcji bilderJetztTauschen(hell). Funkcja musi przy każdym wywołaniu ponownie wyszukać aktualne obrazy i ustawić odpowiednie adresy. Fragment określa wyłącznie moment wykonania.

const wurzel = document.documentElement;
let bildtauschGeplant = false;

function bilderTauschen(hell) {
    if (document.readyState === 'loading') {
        if (bildtauschGeplant) return;
        bildtauschGeplant = true;
        document.addEventListener('DOMContentLoaded', function () {
            bildtauschGeplant = false;
            bilderJetztTauschen(wurzel.getAttribute('data-theme') === 'light');
        }, { once: true });
        return;
    }
    bilderJetztTauschen(hell);
}

Gdy readyState ma wartość loading, rejestrowany jest najwyżej jeden nasłuch zdarzenia. Po wystąpieniu zdarzenia bieżący wybór jest odczytywany z data-theme. Po parsowaniu zamiana następuje natychmiast z przekazaną wartością. Wybór w elemencie głównym musi zostać zaktualizowany przed wywołaniem funkcji.

W izolowanym teście trzy wczesne wywołania spowodowały dokładnie jedną późniejszą zamianę z ostatnio ustawionym jasnym motywem. Następne wywołanie z ciemnym motywem zadziałało natychmiast. Jest to ulepszony przykład; kontrola artykułu nie zmieniła produkcyjnego motywu.