1 of 10

DOM

Об'єктна модель документа

Document Object Model

2 of 10

DOM:

  • DOM – представлення документа у вигляді дерева, доступне для роботи за допомогою мови JavaScript
  • Кожний тег HTML-документу утворює вузол дерева з типом «елемент». Вкладені у нього теги є дочірніми вузлами
  • Для представлення тексту створюються вузли типу «текст»

3 of 10

DOM:

document

html

head

title

#text Заголовок сторінки

body

#text Текст сторінки

4 of 10

Методи навігації по DOM

Метод

Пояснення

document.getElementById("ідентифікатор")

Отримання DOM-об’єкта за ідентифікатором

document.getElementsByName("ім’я")

Отримання DOM-елементів, що мають заданий атрибут name

elem.getElementsByTagName("тег" або "*")

Пошук DOM-об’єктів за тегом

elem.getElementsByClassName("клас")

Пошук DOM-елементів за класом

elem.querySelectorAll("CSS-селектор")

Пошук DOM-елементів за CSS-селектором (усі, що знайдені)

elem.querySelector("CSS-селектор")

Пошук DOM-елементу за CSS-селектором (першого)

5 of 10

Повертаються DOM-елементи за виключенням текстових

тег <html>

document.documentElement

тег <body>

document.body

колекція нащадків

elem.children

батьківський елемент

elem.parentNode

перший нащадок

elem.firstElementChild

останній нащадок

elem.lastElementChild

правий сусід

elem.nextElementSibling

лівий сусід

elem.previousElementSibling

Повертаються усі DOM-елементи, включаючи текстові

колекція нащадків

elem.childNodes

перший нащадок

elem.firstChild

останній нащадок

elem.lastChild

правий сусід

elem.nextSibling

лівий сусід

elem.previousSibling

6 of 10

Отримання класів елемента

  • className – значення атрибуту class (рядок);
  • classList – класи у вигляді колекції;
    • elem.classList.contains("class") – повертає true/false, в залежності від того, чи є у елемента клас class.
    • elem.classList.add/remove("class") – додає/видаляє клас class
    • elem.classList.toggle("class") – якщо класу class немає, додає його, якщо є – видаляє.

7 of 10

Методи для роботи з атрибутами елемента

elem.hasAttribute(name)

перевіряє наявність атрибуту

elem.getAttribute(name)

повертає значення атрибуту

elem.setAttribute(name, value)

встановлює значення атрибуту

elem.removeAttribute(name)

видаляє атрибут

8 of 10

Створення елементу

  • Створення DOM-елемента: �var elem = document.createElement("тег")
  • Створення текстового вузла:�var elem = document.createTextNode("текст")
  • Додавання вузла у DOM як дочірнього тега елементу parentElem (додається в кінець):�parentElem.appendChild(elem)
  • Додавання вузла у DOM як лівого сусіда:�parentElem.insertBefore(elem, nextElem)

9 of 10

Створення копії елементу

  • Створення копії DOM-вузла (разом з вкладеними вузлами): �elem.cloneNode(true)
  • Створення копії DOM-вузла (без вкладених вузлів): �elem.cloneNode(false)
  • Видалення DOM-вузла:�parentElem.removeChild(elem)
  • Заміна дочірнього елементу:�parentElem.replaceChild(newElem, elem)

10 of 10

Приклад

  • var div = document.createElement('div');
  • div.className = "alert alert-success";
  • div.innerHTML = "<strong>Ура!</strong> Є нове повідомлення.";

​

  • document.body.insertBefore(div, document.body.firstChild);

​

  • // створити копію вузла
  • var div2 = div.cloneNode(true);

​

  • // в копію можна вносити зміни
  • div2.querySelector('strong').innerHTML = 'Супер!';

​

  • // і додати її у DOM-стуктуру
  • div.parentNode.insertBefore(div2, div.nextElementSibling);

​