Metody DOM-u

Te przykłady pokazują jak używać niektórych z najważniejszych metod DOM w języku JavaScript. Są one tylko wstępem i powinny dać Ci wyobrażenie o tym, jak można z nich korzystać w swoich projektach. W rzeczywistości te metody są bardziej złożone i pozwalają na wiele innych ciekawych rzeczy. Zaleca się zapoznanie się z dokumentacją języka JavaScript, aby uzyskać pełne rozeznanie w dostępnych metodach i ich możliwościach.

document.querySelector() - zwraca pierwszy element zgodny z podanym selektorem

										
const header = document.querySelector('header');
header.style.backgroundColor = 'red';

element.innerHTML - zwraca lub ustawia HTML wewnątrz elementu

										
const list = document.querySelector('ul');
list.innerHTML = '<li>Item 1</li><li>Item 2</li><li>Item 3</li>';

element.classList - zwraca listę klas dla elementu i pozwala na dodawanie, usuwanie lub sprawdzanie obecności klas

										
const button = document.querySelector('button');
button.classList.add('active');
button.classList.remove('active');
console.log(button.classList.contains('active'));

document.createElement() - tworzy nowy element DOM

										
const newListItem = document.createElement('li');
newListItem.innerText = 'Item 4';
const list = document.querySelector('ul');
list.appendChild(newListItem);

element.setAttribute() - ustawia wartość atrybutu dla elementu

										
const image = document.querySelector('img');

image.setAttribute('alt', 'A beautiful sunset');

.addEventListener()- tworzy nowy element DOM

										
const button = document.querySelector('button');
button.addEventListener('click', function() {
	console.log('Button was clicked');
});