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
javascript

Hope this helps and happy coding :)

Zobacz jeszcze

Check if is no post content

-- echo ('' == get_post()->post_content?'content under...

website buildery

...