Manipulacja DOM-em

Manipulacja DOM-em to proces modyfikowania drzewa elementów HTML i XML w przeglądarce internetowej za pomocą języka JavaScript. DOM to reprezentacja struktury dokumentu HTML lub XML, w postaci drzewa, które składa się z elementów HTML lub XML i atrybutów. Każdy element jest reprezentowany jako obiekt w modelu DOM, co umożliwia programistom manipulowanie tymi elementami z poziomu skryptów JavaScript.

W JavaScript można uzyskać dostęp do elementów DOMU i zmieniać ich właściwości i styl. Oto kilka przykładów:

Dodanie nowego elementu do strony:

										
// utworzenie nowego elementu div
const newElement = document.createElement('div');

// dodanie tekstu do nowego elementu
newElement.innerHTML = 'Nowy element';

// dodanie nowego elementu do drzewa DOM
document.body.appendChild(newElement);

Dodanie obsługi zdarzenia kliknięcia przycisku:

										
// pobranie przycisku o ID 'my-button'
const button =document.getElementById('my-button');

// dodanie obsługi zdarzenia kliknięcia
button.addEventListener('click', function() {

	alert('Kliknięto przycisk!');
});

Zmiana koloru tła elementu:

										
// pobranie elementu o ID 'block'
const element = document.getElementById('block');

// zmiana koloru tła na niebieski
element.style.backgroundColor = 'blue';

Usunięcie elementu ze strony:

										
// pobranie elementu o ID 'my-element'
const element = document.getElementById('block');

// usunięcie elementu z drzewa DOM
element.parentNode.removeChild(element);

Zmiana zawartości elementu:

										
// pobranie elementu o ID 'block'
const element = document.getElementById('block');

// zmiana zawartości elementu
element.innerHTML = 'Nowa zawartość';

Zmiana atrybutu elementu:

										
// pobranie elementu obrazka o ID 'my-image'
const image = document.getElementById('my-image');

// zmiana atrybutu 'src'
image.setAttribute('src', 'new-image.jpg');

Notatka

Te to tylko podstawowe przykłady manipulowania DOM w JavaScript. Istnieje wiele innych metod i właściwości, które można wykorzystać do tworzenia interaktywnych aplikacji webowych.