Dostęp do data-* za pomocą dataset w JavaScript
Odczytywanie i zapisywanie niestandardowych atrybutów data-* za pomocą API dataset
Dostęp do data-* za pomocą dataset w JavaScript to bezpłatna lekcja HTML Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej HTML Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs HTML Academy zawiera 4 lekcji w sumie.
Czym jest API dataset?
Każdy element HTML udostępnia swoje atrybuty data-* za pośrednictwem właściwości dataset — obiektu DOMStringMap, który mapuje nazwy atrybutów na wartości bez konieczności wywoływania getAttribute().
Mapowanie atrybutu na właściwość
data-user-id staje się el.dataset.userId. Łączniki w nazwach atrybutów są zamieniane na zapis camelCase we właściwości dataset. Dostęp do data-item-count uzyskuje się za pomocą el.dataset.itemCount.
Odczytywanie wartości
Aby odczytać atrybut data, należy użyć: const id = el.dataset.userId. Wszystkie wartości dataset są ciągami znaków — w razie potrzeby wartości liczbowe należy konwertować za pomocą Number() lub parseInt(). Nieistniejące atrybuty zwracają undefined, a nie null.
const card = document.querySelector(".card");
const userId = card.dataset.userId;
const count = Number(card.dataset.itemCount);Zapisywanie wartości
Atrybut data można ustawić za pomocą dataset: el.dataset.state = "active". Spowoduje to utworzenie lub aktualizację atrybutu HTML data-state. Zmiana atrybutu jest natychmiast odzwierciedlana w DOM i może być obserwowana przez MutationObserver.
Usuwanie wartości
Aby usunąć atrybut data, należy użyć: delete el.dataset.userId. Odpowiadający mu atrybut data-user-id zostaje usunięty z elementu. Można również użyć el.removeAttribute("data-user-id"), aby jawnie go usunąć.
Iterowanie po dataset
dataset jest obiektem DOMStringMap — można po nim iterować za pomocą pętli for...in lub rozwinąć go do Object.entries: Object.entries(el.dataset).forEach(([key, value]) => { ... }). Jest to przydatne podczas zbiorczego odczytywania wszystkich atrybutów data elementu.
Używanie dataset do przechowywania stanu komponentu
Lekki stan komponentu należy przechowywać w atrybutach data zamiast w ukrytych polach wejściowych lub zmiennych JavaScript. Komponent kart przechowuje indeks aktywnej karty w data-active-tab na elemencie kontenera; każda skryptowa część aplikacji może go odczytać bez użycia współdzielonej zmiennej.
Delegowanie zdarzeń za pomocą dataset
W przypadku listy elementów należy podłączyć jeden nasłuchiwacz kliknięć do kontenera. Po kliknięciu należy odczytać dataset klikniętego elementu: e.target.closest("[data-id]").dataset.id. Jeden nasłuchiwacz obsługuje wszystkie elementy bez narzutu związanego z wiązaniem każdego z nich osobno.
dataset a właściwości niestandardowe
Należy używać dataset dla danych, które muszą być odczytywalne z HTML (metadane renderowane po stronie serwera i dostępne dla selektorów CSS). Zmiennych JavaScript należy używać dla tymczasowego stanu wykonywania, który nie musi być widoczny w HTML. Łączenie obu podejść dodaje niepotrzebnej złożoności.
Uwaga na konwersję typów
dataset zawsze zwraca ciągi znaków. el.dataset.active === true zawsze ma wartość false — należy porównać wartość z el.dataset.active === "true" albo dokonać konwersji: el.dataset.active === "true". Stan logiczny przechowywany w dataset wymaga porównywania ciągów znaków.
dataset a getAttribute
Oba sposoby służą do odczytywania atrybutów data. dataset jest wygodniejszy przy dostępie w zapisie camelCase, natomiast getAttribute wymaga podania pełnej nazwy atrybutu wraz z prefiksem „data-”. W nowoczesnym kodzie należy preferować dataset; getAttribute warto stosować podczas iterowania po zwykłych atrybutach razem z atrybutami data.
Sprawdzenie wiedzy
Jak atrybut HTML data-user-id jest reprezentowany w obiekcie dataset JavaScriptu?
Podsumowanie
API dataset mapuje atrybuty data-* na właściwości JavaScript w zapisie camelCase, umożliwiając ich łatwy odczyt, zapis i usuwanie. Pozwala przechowywać stan komponentów, stosować wzorce delegowania zdarzeń oraz przekazywać dane z serwera do klienta bez ukrytych pól wejściowych i zmiennych globalnych.
Często zadawane pytania
Czy lekcja „Dostęp do data-* za pomocą dataset w JavaScript” jest bezpłatna?
Tak — pełny tekst „Dostęp do data-* za pomocą dataset w JavaScript” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu HTML Academy, przejdź na CoddyKit PRO. Kurs HTML Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Dostęp do data-* za pomocą dataset w JavaScript”?
Odczytywanie i zapisywanie niestandardowych atrybutów data-* za pomocą API dataset Ćwiczysz HTML Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć HTML Academy?
Nie wymagamy żadnego doświadczenia. HTML Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.
Ile czasu zajmuje lekcja „Dostęp do data-* za pomocą dataset w JavaScript”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji HTML Academy?
Tak. Każda lekcja HTML Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Składnia data-* i konwencje nazewnictwa
- Dostęp do data-* za pomocą dataset w JavaScript
- Używanie data-* z selektorami atrybutów CSS
- Wzorce z praktyki — podpowiedzi i śledzenie stanu