Zmiana treści: textContent, innerHTML, classList
Odczytuj i aktualizuj treść tekstową elementów, wstrzykuj HTML oraz programowo przełączaj, dodawaj i usuwaj klasy CSS.
Zmiana treści: textContent, innerHTML, classList to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 3 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 Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Odczytywanie i zapisywanie textContent
element.textContent pobiera lub ustawia zwykłą treść tekstową elementu wraz ze wszystkimi elementami potomnymi. Jest bezpieczne — nigdy nie analizuje HTML, więc ustawienie go na podstawie danych wejściowych użytkownika nie tworzy luk XSS.
const heading = document.querySelector('h1');
console.log(heading.textContent); // read
heading.textContent = 'New Title'; // write — replaces all children
// Safe with user input:
element.textContent = userInput; // no XSS riskinnerHTML — używaj ostrożnie
element.innerHTML pobiera lub ustawia znaczniki HTML wewnątrz elementu. Jest wygodne, ale niebezpieczne w przypadku danych wejściowych użytkownika — analizuje HTML i może wykonywać skrypty (XSS). Nigdy nie należy ustawiać innerHTML na podstawie nieoczyszczonych danych użytkownika.
card.innerHTML = '<strong>Loading...</strong>'; // safe: hardcoded string
// DANGER — never do this:
element.innerHTML = userInput; // XSS vulnerability
// Safe alternative:
const div = document.createElement('div');
div.textContent = userInput; // won't parse as HTMLinnerText a textContent
innerText zwraca tylko widoczny tekst (uwzględnia CSS display:none) i powoduje przeliczenie układu. textContent zwraca cały tekst, także ukryty, i działa szybciej. Należy preferować textContent, chyba że potrzebne jest konkretne zachowanie związane z widocznym tekstem.
classList — dodawanie i usuwanie klas
element.classList udostępnia metody modyfikowania klas CSS bez zmieniania całego ciągu className. add(), remove(), toggle(), contains(), replace().
const btn = document.querySelector('.btn');
btn.classList.add('active'); // add a class
btn.classList.remove('disabled'); // remove a class
btn.classList.toggle('open'); // add if absent, remove if present
console.log(btn.classList.contains('active')); // truetoggle z parametrem wymuszającym
classList.toggle('class', condition) dodaje klasę, gdy condition ma wartość truthy, a usuwa ją, gdy ma wartość falsy. To prosty sposób na synchronizowanie klasy ze stanem logicznym.
const isDark = true;
document.body.classList.toggle('dark-mode', isDark);
// No more: if/else with add/removeOdczytywanie i ustawianie atrybutów
element.getAttribute('attr') odczytuje dowolny atrybut. element.setAttribute('attr', value) ustawia go. element.removeAttribute('attr') usuwa go. element.hasAttribute('attr') sprawdza jego istnienie.
const img = document.querySelector('img');
console.log(img.getAttribute('alt'));
img.setAttribute('alt', 'New description');
img.removeAttribute('loading');Atrybuty data-*
Niestandardowe atrybuty data-* przechowują dodatkowe dane w elementach bez wpływania na DOM. Dostęp do nich uzyskuje się za pomocą element.dataset w zapisie camelCase.
<div id="card" data-user-id="42" data-role="admin"></div>
const card = document.querySelector('#card');
console.log(card.dataset.userId); // '42'
console.log(card.dataset.role); // 'admin'
card.dataset.status = 'active'; // sets data-statusWłaściwość style
element.style.propertyName ustawia style inline. W przypadku właściwości zapisywanych z łącznikiem należy używać zapisu camelCase. Zamiast ustawiać style inline, lepiej przełączać klasy CSS — dzięki temu style pozostają w plikach CSS, gdzie powinny się znajdować.
element.style.backgroundColor = '#e2e8f0'; // camelCase
element.style.marginTop = '16px';
element.style.display = 'none';
// Reset inline style:
element.style.removeProperty('background-color');Odczytywanie obliczonych stylów
getComputedStyle(element) zwraca faktycznie zastosowane style po uwzględnieniu kaskady, a nie tylko style inline. Należy używać go do odczytywania stylów ustawionych przez klasy CSS lub domyślne ustawienia przeglądarki.
const el = document.querySelector('.card');
const styles = getComputedStyle(el);
console.log(styles.fontSize); // '16px'
console.log(styles.display); // 'flex'Modyfikowanie znaczników title i meta
Tytuł dokumentu (karta przeglądarki) można w dowolnym momencie zmienić za pomocą document.title = 'New Title'. W aplikacjach SPA poprawia to komfort użytkownika podczas przechodzenia między widokami.
// Update tab title on route change:
document.title = `${pageName} | MyApp`;scrollIntoView()
element.scrollIntoView({ behavior: 'smooth' }) płynnie przewija widok do elementu. Doskonale sprawdza się w nawigacji przewijającej do sekcji oraz przy wyróżnianiu błędów walidacji w formularzach.
document.querySelector('#pricing').scrollIntoView({ behavior: 'smooth', block: 'start' });Szybkie sprawdzenie
Jakiej właściwości należy użyć, aby bezpiecznie wyświetlić tekst podany przez użytkownika w DOM bez ryzyka XSS?
Podsumowanie: modyfikowanie DOM
textContent bezpiecznie ustawia zwykły tekst. innerHTML ustawia HTML (jest niebezpieczne w przypadku danych wejściowych użytkownika). classList.add/remove/toggle umożliwia wygodne zarządzanie klasami CSS. setAttribute/dataset służą do zarządzania atrybutami HTML. Zamiast stylów inline należy preferować przełączanie klas. getComputedStyle odczytuje końcowe zastosowane style.
Często zadawane pytania
Czy lekcja „Zmiana treści: textContent, innerHTML, classList” jest bezpłatna?
Tak — pełny tekst „Zmiana treści: textContent, innerHTML, classList” 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 Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Zmiana treści: textContent, innerHTML, classList”?
Odczytuj i aktualizuj treść tekstową elementów, wstrzykuj HTML oraz programowo przełączaj, dodawaj i usuwaj klasy CSS. Ćwiczysz Frontend 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ąć Frontend Academy?
Nie wymagamy żadnego doświadczenia. Frontend 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 3 z 4.
Ile czasu zajmuje lekcja „Zmiana treści: textContent, innerHTML, classList”?
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 Frontend Academy?
Tak. Każda lekcja Frontend 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
- querySelector i querySelectorAll
- addEventListener i obiekt Event
- Zmiana treści: textContent, innerHTML, classList
- Tworzenie i dołączanie elementów