The Document Object Model (DOM) is a programming interface for HTML, XML and SVG documents
provides a structured representation of the document (a tree)
defines a way that the structure can be accessed from programs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<main>
<section></section>
</main>
<footer></footer>
</body>
</html>
Document
DOCTYPE
HTML
head
body
meta
title
main
footer
section
Document
DOCTYPE
HTML
head
body
meta
title
main
footer
section
text
text
text
text
text
text
text
text
<HTML> = document.documentElement
<BODY> = document.body
elem.childNodes
elem.firstChild
elem.lastChild
Array?
Collecton
elem.previousSubling
elem.previousSubling
Children
Neighbors
Навигационные ссылки, описанные выше, равно касаются всех узлов в документе. В частности, в childNodesсосуществуют и текстовые узлы и узлы-элементы и узлы-комментарии, если есть.
children – только дочерние узлы-элементы, то есть соответствующие тегам.
firstElementChild, lastElementChild – соответственно, первый и последний дети-элементы.
previousElementSibling, nextElementSibling – соседи-элементы.
parentElement - родительский элемент
document.getElementById("id")
<div id="content">Выделим этот элемент</div>
<script>
var elem = document.getElementById('content');
elem.style.background = 'red';
alert( elem == content ); // true
content.style.background = ""; // один и тот же элемент
</script>
<div id="content-holder">
<div id="content">Элемент</div>
</div>
<script>
alert( content ); // DOM-элемент
alert( window['content-holder'] ); // в имени дефис, поэтому через [...]
</script>
elem.getElementsByTagName(tag)
document.getElementsByName(name)
elem.getElementsByClassName(className)
elem.querySelectorAll(css)
elem.querySelector(css)
<ul>
<li>Этот</li>
<li>тест</li>
</ul>
<ul>
<li>полностью</li>
<li>пройден</li>
</ul>
<script>
var elements = document.querySelectorAll('ul > li:last-child');
for (var i = 0; i < elements.length; i++) {
alert( elements[i].innerHTML ); // "тест", "пройден"
}
</script>
Alive
Not alive
elem.matches(css)
elem.closest(css)
<ul>
<li class="chapter">Глава I
<ul>
<li class="subchapter">Глава <span class="num">1.1</span></li>
<li class="subchapter">Глава <span class="num">1.2</span></li>
</ul>
</li>
</ul>
<script>
var numberSpan = document.querySelector('.num');
// ближайший элемент сверху подходящий под селектор li
alert(numberSpan.closest('li').className) // subchapter
// ближайший элемент сверху подходящий под селектор .chapter
alert(numberSpan.closest('.chapter').tagName) // LI
// ближайший элемент сверху, подходящий под селектор span
// это сам numberSpan, так как поиск включает в себя сам элемент
alert(numberSpan.closest('span') === numberSpan) // true
</script>
var elems = document.body.children;
for (var i = 0; i < elems.length; i++) {
if (elems[i].matches('a[href$="zip"]')) {
alert( "Ссылка на архив: " + elems[i].href );
}
}
Тип узла содержится в его свойстве nodeType
nodeName и tagName содержат название(тег) элемента узла.
tagName есть только у элементов Element, nodeName определено для любых узлов Node
Свойство innerHTML позволяет получить HTML-содержимое элемента в виде строки. В innerHTML можно и читать и писать. Добавление innerHTML+= осуществляет перезапись
Свойство outerHTML содержит HTML элемента целиком. Изменить outerHTML элемента невозможно. Элемент не меняется, а заменяется на новый, который тут же создаётся из нового outerHTML. При этом в переменной остается старый
Свойство innerHTML есть только у узлов-элементов.
Содержимое других узлов, например, текстовых или комментариев, доступно на чтение и запись через свойство data.
Свойство textContent содержит только текст внутри элемента, за вычетом всех <тегов>. Оно возвращает конкатенацию всех текстовых узлов внутри elem.
hidden - скрывает или показывает элемент (true/false)
У DOM-узлов есть и другие свойства, зависящие от типа, например:
value – значение для INPUT, SELECT или TEXTAREA
id – идентификатор
href – адрес ссылки
…многие другие…
Изменение некоторых свойств обновляет атрибут. Но это скорее исключение, чем правило.
Чаще синхронизация – односторонняя: свойство зависит от атрибута, но не наоборот.
С помощью нестандартных атрибутов можно привязать к элементу данные, которые будут доступны в JavaScript.
Как правило, это делается при помощи атрибутов с названиями, начинающимися на data-
div id="elem" data-about="Elephant" data-user-location="street">
По улице прошёлся слон. Весьма красив и толст был он.
</div>
<script>
alert( elem.dataset.about ); // Elephant
alert( elem.dataset.userLocation ); // street
</script>
document.createElement(tag)
Создает новый элемент с указанным тегом
document.createTextNode(text)
Создает новый *текстовый* узел с данным текстом
parentElem.appendChild(elem)
Добавляет elem в конец дочерних элементов parentElem
parentElem.insertBefore(elem, nextSibling)
Вставляет elem в коллекцию детей parentElem, перед элементом nextSibling
elem.cloneNode(true/false)
Cоздаст копию элемента
parentElem.removeChild(elem)
Удаляет elem из списка детей parentElem.
parentElem.replaceChild(newElem, elem)
Среди детей parentElem удаляет elem и вставляет на его место newElem.
Обычные методы вставки работают с одним узлом. Но есть и способы вставлять множество узлов одновременно.
elem.insertAdjacentHTML(where, html)
Позволяет вставлять произвольный HTML в любое место документа, в том числе и между узлами!
html - строка HTML, которую нужно вставить
where - куда по отношению к elem вставлять строку:
Вставить пачку узлов единовременно поможет DocumentFragment. Это особенный кросс-браузерныйDOM-объект, который похож на обычный DOM-узел, но им не является.
var fragment = document.createDocumentFragment();
for (цикл по li) {
fragment.appendChild(list[i]);
}
ul.appendChild(fragment);
node.append(...nodes)
вставляет nodes в конец node,
node.prepend(...nodes)
вставляет nodes в начало node,
node.after(...nodes)
вставляет nodes после узла node,
node.before(...nodes)
вставляет nodes перед узлом node,
node.replaceWith(...nodes)
вставляет nodes вместо node.
Свойство element.style возвращает объект, который дает доступ к стилю элемента на чтение и запись
background-color => elem.style.backgroundColor
z-index => elem.style.zIndex
border-left-width => elem.style.borderLeftWidth
document.body.style.backgroundColor = 'green';
button.style.MozBorderRadius = '5px';
button.style.WebkitBorderRadius = '5px';
Свойство style.cssText позволяет поставить стиль целиком в виде строки.
<div>Button</div>
<script>
var div = document.body.children[0];
div.style.cssText="color: red !important; \
background-color: yellow; \
width: 100px; \
text-align: center; \
blabla: 5; \
";
alert(div.style.cssText);
</script>
Свойство style содержит лишь тот стиль, который указан в атрибуте элемента, без учёта каскада CSS
Для того, чтобы получить текущее используемое значение свойства, используется метод window.getComputedStyle
getComputedStyle(element[, pseudo])
element - элемент, значения для которого нужно получить
pseudo - указывается, если нужен стиль псевдо-элемента, например "::before". Пустая строка или отсутствие аргумента означают сам элемент.
offsetParent – «родитель по дереву рендеринга» – ближайшая ячейка таблицы, body для статического позиционирования или ближайший позиционированный элемент для других типов позиционирования.
offsetLeft/offsetTop – позиция в пикселях левого верхнего угла блока, относительно его offsetParent.
offsetWidth/offsetHeight – «внешняя» ширина/высота блока, включая рамки.
clientLeft/clientTop – отступ области содержимого от левого-верхнего угла элемента. Если операционная система располагает вертикальную прокрутку справа, то равны ширинам левой/верхней рамки, если же слева (ОС на иврите, арабском), то clientLeft включает в себя прокрутку.
clientWidth/clientHeight – ширина/высота содержимого вместе с полями padding, но без полосы прокрутки.
scrollWidth/scrollHeight – ширина/высота содержимого, включая прокручиваемую область. Включает в себя padding и не включает полосы прокрутки.
scrollLeft/scrollTop – ширина/высота прокрученной части документа, считается от верхнего левого угла.
scrollBy(x,y)
Прокручивает страницу относительно текущих координат.
scrollTo(pageX,pageY)
Прокручивает страницу к указанным координатам относительно документа.
Он эквивалентен установке свойств scrollLeft/scrollTop.
elem.scrollIntoView(top)
Вызывается на элементе и прокручивает страницу так, чтобы элемент оказался вверху, если параметр top равен true, и внизу, если top равен false
elem.getBoundingClientRect() возвращает координаты элемента, под которыми понимаются размеры «воображаемого прямоугольника», который охватывает весь элемент. Координаты возвращаются в виде объекта со свойствами:
top – Y-координата верхней границы элемента,
left – X-координата левой границы,
right – X-координата правой границы,
bottom – Y-координата нижней границы.
не учитывают прокрутку
elem.elementFromPoint(x,y) возвращает элемент, который находится на координатах (x, y) относительно окна