DOM = Document object model = Об'єктна модель документа
 DOM описує структуру веб-сторінки деревоподібному вигляді і надає розробнику спосіб отримати доступ до окремих елементів веб-сторінки, таких як document, element (html-елемент), text (текст html-елемента), attr (атрибут html-елемента), processingInstruction (інструкція обробки веб-сторінки) та ін.
Для роботи зі структурою DOM JavaScript призначений об'єкт document, який визначений у глобальному об'єкті window.
Для доступу до елементів сторінки існують наступні методи об'єкту document:
document.title - доступ до заголовку документу
document.lastModified - коли були внесені останні зміни
document.URL - посилання на поточний документ
document.domain - відображає домен, до якого належить веб-сторінка документу
document.documentElement - отримання корінного елементу <html> даного документу
document.body - отримання елементу <body> даного документу
document.head - отримання елементу <head> даного документу
document.cookie - отримання колекції куків даного документу
document.images - отримання колекції зображень документу
document.forms - отримання колекції форм на сторінці
document.links - отримання колекції посилань із визначеним атрибутом href
document.anchors - отримання колекції посилань із визначеним атрибутом name
Для прикладу:

Кубик
<div class="cube"></div>

Стаття із трьома абзацами
<article id="article"> <p id="p-one" style="color: maroon;">Абзац 1</p> <p id="p-two">Абзац 2</p> <p id="p-three">Абзац 3</p> </article>

Абзац 1

Абзац 2

Абзац3

Форма із трьома полями
<form name="my" id="forma"> <input name="one" value="1" id="inputone"> <input name="two" value="2" id="inputtwo"> <input name="three" value="3" id="inputthree"> </form>
Для пошуку елементів у отриманих об'єктах:
document.getElementById("forma") - вибирає елемент із заданим id
document.getElementsByTagName("input") - повертає список типу NodeList із усіма елементами із заданим тегом
document.getElementsByClassName("cube") - повертає список типу NodeList із усіма елементами із заданим class
document.getElementsByName("td") - повертає список типу NodeList із усіма елементами із заданим name
document.getElementsByTagName("center") - отримання колекції посилань із визначеним атрибутом name
document.querySelector("form input") - вибирає перший елемент, що відповідає заданому селектору
document.querySelectorAll("form input") - повертає список типу NodeList із усіма елементами, що відповідають заданому селектору
Для пошуку можна застосовувати наступні селектори:
document.querySelector("*") - вибирає всі елементи
document.querySelector("a") - вибирає всі елементи типу а
document.querySelector(".class") - вибирає всі елементи із класом "class"
document.querySelector("#id") - вибирає всі елементи із id "id"
document.querySelector("not(а)") - вибирає всі елементи крім тих, що відповідають селектору а
document.querySelector("[a]") - вибирає всі елементи із атрибутом а
document.querySelector("[a="b"]") - вибирає всі елементи, у яких атрибут a має значення b
document.querySelector("[a~="b"]") - вибирає всі елементи, у яких атрибут a має список значеннь, одне із яких b
document.querySelector("[a^="b"]") - вибирає всі елементи, у яких значення атрибуту a починається на b
document.querySelector("[a$="b"]") - вибирає всі елементи, у яких значення атрибуту a закінчується на b
document.querySelector("[a*="b"]") - вибирає всі елементи, у яких значення атрибуту a містить підрядок b
document.querySelector("[a|="b"]") - вибирає всі елементи, у яких значення атрибуту a складається зі слів, записаних через дефіс, перше слово із яких дорівнює b
document.querySelector(":hover") - вибирає всі посилання, над якими в даний момент знаходиться курсор
document.querySelector(":checked") - вибирає всі відмічені чекбокси та радіокнопки
Об'єкт Node("вузол") надає ряд властивостей, за допомогою яких ми можемо дістати інформацію про отриманий елемент:
document.getElementById("p-one").parentElement - повертає батьківський вузол-елемент
document.getElementById("p-one").parentNode - повертає батьківський вузол
document.getElementById("p-one").nextElementSibling - повертає наступний вузол-елемент, що знаходиться на одному рівні із поточним
document.getElementById("p-one").nextSibling - повертає наступний вузол, що знаходиться на одному рівні із поточним
document.getElementById("p-one").previousElementSibling - повертає попередній вузол-елемент, що знаходиться на одному рівні із поточним
document.getElementById("p-one").previousSibling - повертає попередній вузол, що знаходиться на одному рівні із поточним
document.getElementById("article").lastElementChild - повертає останній дочерній вузол-елемент
document.getElementById("article").lastChild - повертає останній дочерній вузол
document.getElementById("article").firstElementChild - повертає перший дочерній вузол-елемент
document.getElementById("article").firstChild - повертає перший дочерній вузол
document.getElementById("article").children - повертає колекцію дочірніх вузлів-елементів
document.getElementById("article").childNodes - повертає колекцію дочірніх вузлів
document.getElementById("article").ownerDocument - повертає корінний файл документу
Отримані вузли мають наступні властивості:
document.getElementById("article").nodeName - повертає ім'я вузла
document.getElementById("article").nodeType - повертає тип вузла у вигляді числа
document.getElementById("p-one").nodeValue - повертає текст текстового вузла
document.getElementById("p-one").tagName - повертає тег елементу
document.getElementById("p-one").textContent - повертає текстовий вміст елементу
document.getElementById("p-one").innerText - повертає текстовий вміст елементу,
дозволяє також отримати стилі
document.getElementById("p-one").innerHTML - представляє html-код елементу
document.getElementById("article").firstElementChild.getAttribute("style") - повертає значення атрибуту вузла
document.getElementById("article").firstElementChild.style
Створення елементів
.createElement() document.getElementById('b_createElement').innerHTML = document.createElement("h1"); - створити html-елемент <span id="b_createElement"></span>
.createTextNode() document.getElementById('b_createTextNode').innerHTML = document.createTextNode("text"); - створити текстовий вузол <span id="b_createTextNode"></span>
.appendChild() const header = document.createElement("h4"); const headerText = document.createTextNode("text"); header.appendChild( headerText); document.getElementById('b_appendChild').appendChild(header); - додає новий вузол в кінець колекції дочірніх вузлів <td id="b_appendChild"></td>
.textcontent const header = document.createElement("h4"); header.textContent = "text"; document.getElementById('b_textcontent').appendChild(header); - додати текст у створений (чи існуючий) елемент <td id="b_textcontent"></td>
.insertBefore(new-element, existing-element) const header = document.createElement("h4"); header.textContent = "text"; const firstP = document.getElementById('b_beforeSpan'); document.getElementById('b_insertBefore').insertBefore(header, firstP); - додає новий вузол перед іншим елементом <td id="b_insertBefore"> <span id="b_beforeSpan"></span> </td>
.cloneNode(true) const article = document.getElementById("article"); const lastP = article.lastElementChild; const newLastP = lastP.cloneNode(true); newLastP.textContent += " Копія"; document.getElementById('b_cloneNode').appendChild(newLastP); - скопіювати вузол
true - разом із усіма дочірніми вузлами
false - без дочірніх вузлів		 <td id="b_cloneNode"></td>
.replaceChild(newNode, oldNode) const Parent = document.getElementById("b_replaceChild"); const oldNode = Parent.firstElementChild; const newNode = document.createElement("h4"); newNode.textContent = "Текст результату"; Parent.replaceChild(newNode, oldNode); - замінити вузол

<td id="b_replaceChild"> <h4>Текст</h4> </td>
.removeChild() const Parent = document.getElementById("b_removeChild"); const oldNode = Parent.firstElementChild; Parent.removeChild(oldNode); - видалити вузол

<td id="b_removeChild"> <h4>Текст</h4> </td>
.setAttribute(attr, value) const element = document.getElementById("b_setAttribute"); element.setAttribute("style", "color:FireBrick;"); - додати атрибут до вузла <span id="b_setAttribute"></span>
.createAttribute(attr) const element = document.getElementById("b_createAttribute"); const attr = element.createAttribute("style"); attr.value = "color:FireBrick;"; element.setAttributeNode(attr); - створити атрибут <span id="b_createAttribute"></span>
.removeAttribute(attr) const element = document.getElementById("b_removeAttribute"); element.removeAttribute("style"); - видалити атрибут <span id="b_removeAttribute" style="color:FireBrick;"></span>
element.style.attribute const element = document.getElementById("b_changeAttribute"); element.style.color = "navy"; - змінити атрибут,
детальніше про редагування атрибутів "class" 		<span id="b_changeAttribute" style="color:FireBrick;"></span>