Jak poprawnie manipulować DOM w JavaScript

By /

JavaScript

Manipulacja DOM (Document Object Model) jest podstawowym elementem tworzenia interaktywnych stron internetowych. Pozwala to na dynamiczną zmianę zawartości, struktury i stylu dokumentu HTML za pomocą JavaScript. W tej lekcji omówimy, jak poprawnie manipulować DOM, korzystając z kilku podstawowych technik.

Przykład: Dynamiczna zmiana treści na stronie

Zacznijmy od prostego przykładu, w którym za pomocą JavaScript zmienimy treść elementu HTML.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Manipulacja DOM</title>
</head>
<body>
    <h1 id="header">Witaj na mojej stronie</h1>
    <button id="changeTextButton">Zmień tekst nagłówka</button>

    <script src="script.js"></script>
</body>
</html>
Kod JavaScript (script.js)
// Wybieranie elementu po ID
const header = document.getElementById('header');

// Funkcja zmieniająca tekst nagłówka
function changeHeaderText() {
    header.textContent = "Nowy tekst nagłówka";
}

// Wybieranie przycisku i dodawanie nasłuchiwacza zdarzeń
const changeTextButton = document.getElementById('changeTextButton');
changeTextButton.addEventListener('click', changeHeaderText);

W powyższym przykładzie, po kliknięciu przycisku Zmień tekst nagłówka, tekst w elemencie <h1> zostaje zmieniony na “Nowy tekst nagłówka”. Demonstruje to podstawową manipulację DOM – zmianę treści tekstowej elementu.

Dodawanie i usuwanie elementów

Manipulacja DOM nie ogranicza się tylko do zmiany treści istniejących elementów. Możemy również dynamicznie dodawać lub usuwać elementy z drzewa DOM.

Dodawanie elementu
// Tworzenie nowego elementu paragrafu
const newParagraph = document.createElement('p');
newParagraph.textContent = "To jest nowy paragraf dodany do strony.";

// Dodawanie nowego paragrafu do body
document.body.appendChild(newParagraph);
Usuwanie elementu
// Usuwanie wcześniej dodanego paragrafu
document.body.removeChild(newParagraph);

Modyfikacja stylów

JavaScript pozwala również na modyfikację stylów elementów, co umożliwia dynamiczną zmianę wyglądu strony.

// Zmiana stylu nagłówka
header.style.color = 'blue';
header.style.fontSize = '24px';

Podsumowanie

Manipulacja DOM w JavaScript umożliwia tworzenie dynamicznych i interaktywnych stron internetowych. Kluczowe aspekty to:

  • Wybieranie elementów za pomocą document.getElementById(), document.querySelector() i innych metod.
  • Modyfikacja treści elementów poprzez textContent lub innerHTML.
  • Dodawanie i usuwanie elementów za pomocą document.createElement() i metod appendChild() oraz removeChild().
  • Zmiana stylów elementów przez modyfikację właściwości style.

Prawidłowe wykorzystanie tych technik pozwala na skuteczną manipulację strukturą, zawartością i stylem stron internetowych, czyniąc je bardziej interaktywnymi i przyjaznymi dla użytkownika.

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs video JavaScript w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

Powiązane artykuły

Scroll to Top