JavaScript – DOM
Manipulacja DOM (Document Object Model) w JavaScript to proces modyfikowania struktury, stylu lub zawartości dokumentu HTML za pomocą kodu JavaScript. DOM to reprezentacja struktury dokumentu w postaci drzewa, gdzie każdy element, atrybut i tekst są węzłami.
1. Pobieranie elementów DOM
Aby manipulować elementami, najpierw musisz je odnaleźć.
- document.getElementById(„id”) – pobiera element o podanym identyfikatorze
- document.getElementById(„link”).src
- document.querySelector(„selector”) – pobiera pierwszy element pasujący do selektora CSS
- document.querySelector(’h1′),
- document.querySelector(’#tempDivInDOM’)
- document.querySelectorAll(„selector”) – pobiera wszystkie elementy pasujące do selektora jako listę węzłów (NodeList)
- document.getElementsByClassName(„class”) – pobiera elementy o określonej klasie (starsza metoda)
- document.getElementsByTagName(„tag”) – pobiera wszystkie elementy o określonym tagu
- document.getElementsByTagName(„a”)[0] = w ten sposób pobiera tylko pierwszy element o wskazanym tagu
2. Modyfikacja zawartości i atrybutów
Dzięki nim możesz zmieniać tekst, HTML lub atrybuty elementów.
- elem.textContent – ustawia lub zwraca tekst wewnątrz elementu
- elem.textContent = 'This is the paragraph’
- elem.innerHTML – ustawia lub zwraca kod HTML wewnątrz elementu
- elem.innerHTML = paragraph
- elem.setAttribute(„atrybut”, „wartość”) – ustawia atrybut
- elem.getAttribute(„atrybut”) – pobiera wartość atrybutu
3. Modyfikacja stylów
Możesz zmieniać style CSS elementów.
- element.style.property – zmienia właściwości stylu
- elem.style.color = „red”
- element.classList – umożliwia zarządzanie klasami CSS
- elem.classList.add(„active”),
- elem.classList.remove(„hidden”)
- elem.classList.toggle(’classname’)
- elem.classList.contains(’class__name’)
- document.documentElement.style.setProperty(’–_hue’, randColor) – globalna zmiana wartości zmiennej CSS –_hue
- elem.id = 'mainId’ – nadanie id elementowi
4. Tworzenie i usuwanie elementów
JavaScript pozwala tworzyć, dodawać lub usuwać elementy.
- document.createElement(„tag”) – tworzy nowy element
- document.createElement(’div’)
- parentElement.appendChild(childElement) – dodaje element jako ostatnie dziecko
- parentElement.insertBefore(newElement, existingElement) – wstawia węzeł podany jako pierwszy argument przed węzłem podanym jako drugi argument
- elem.remove() – usuwa element z drzewa DOM
- removeChild – usuwa element potomny (child element) z elementu nadrzędnego (parent element)
- zwraca referencję do usuniętego elementu, co pozwala ewentualnie na ponowne wykorzystanie
- childElement musi być bezpośrednim potomkiem parentElement
- replaceChild – zastąpienie jednego elementu potomnego (child element) innym elementem w obrębie tego samego elementu nadrzędnego (parent element)
- parentElement.replaceChild(newChild, oldChild)
- document.createTextNode
- elem.insertAdjacentHTML(’beforeend’, '<\p>This is the paragraph.<\/p>’);
5. Obsługa zdarzeń
Możesz nasłuchiwać i reagować na akcje użytkownika.
- element.addEventListener(„zdarzenie”, funkcja) – dodaje nasłuchiwanie na zdarzenie
- button.addEventListener(„click”, () => {});
inne
- nodeType – własność węzła, zawiera kod numeryczny określający typ węzła
- 1 – document.ELEMENT_NODE
- 3 – document.TEXT_NODE
- 8 – document.COMMENT_NODE
- childNodes – własność przechowująca obiekt podobny do tablicy mający własność length + własności o nazwach numerycznych pozwalające na dostęp do węzłów potomnych
- NodeList
- firstChild, ma własność previousSibling = null
- lastChild, ma własność nextSibling = null
- previousSibling
- nextSibling
- nodeValue – węzła tekstowego odnosi się do łańcucha tekstu reprezentowanego poprzez ten węzeł
- className
- parentElement
- children
- getAttribute
- setAttribute
Hope this helps and happy coding :)