O lekcji
DOM oferuje różne metody wyszukiwania elementów HTML:
Metody wyszukiwania elementów
getElementById– Znajduje element na podstawie jegoid.
const element = document.getElementById("tytul");
console.log(element.textContent);
getElementsByClassName– Znajduje elementy na podstawie klasy (zwraca kolekcję).
const elementy = document.getElementsByClassName("paragraf");
console.log(elementy[0].textContent);
getElementsByTagName– Znajduje elementy na podstawie nazwy tagu.
const naglowki = document.getElementsByTagName("h1");
console.log(naglowki[0].textContent);
querySelector– Znajduje pierwszy element pasujący do selektora CSS.
const pierwszyParagraf = document.querySelector(".paragraf");
console.log(pierwszyParagraf.textContent);
querySelectorAll– Znajduje wszystkie elementy pasujące do selektora CSS (zwraca NodeList).
const wszystkieParagrafy = document.querySelectorAll(".paragraf");
wszystkieParagrafy.forEach((paragraf) => {
console.log(paragraf.textContent);
});
Manipulowanie DOM
Możemy zmieniać zawartość lub atrybuty elementów.
Przykład:
const tytul = document.getElementById("tytul");
tytul.textContent = "Zmieniony tytuł!"; // Zmiana tekstu
tytul.style.color = "blue"; // Zmiana koloru tekstu
tytul.style.fontSize = "24px"; // Zmiana rozmiaru czcionki