DOM

The Document Object Model (DOM) is a programming interface for HTML, XML and SVG documents
  1. provides a structured representation of the document (a tree)
  2. defines a way that the structure can be accessed from programs

DOM

<!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

Navigation

<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 - родительский элемент

Search

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>

Search

elem.getElementsByTagName(tag)

document.getElementsByName(name)

elem.getElementsByClassName(className)

Search

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>

getElement(s)By

querySelector

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 );
    }
  }

Node

Тип узла содержится в его свойстве nodeType

  1. Элемент.
  2. Текстовый узел.

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 – адрес ссылки

…многие другие…

Attribute

  1. elem.hasAttribute(name) – проверяет наличие атрибута
  2. elem.getAttribute(name) – получает значение атрибута
  3. elem.setAttribute(name, value) – устанавливает атрибут
  4. elem.removeAttribute(name) – удаляет атрибут

Изменение некоторых свойств обновляет атрибут. Но это скорее исключение, чем правило.

Чаще синхронизация – односторонняя: свойство зависит от атрибута, но не наоборот.

Class

  1. elem.className – возвращает классы в виде строки
  2. elem.classList – возвращает классы в виде объекта
    • elem.classList.contains("class") – возвращает true/false, в зависимости от того, есть ли у элемента класс class.
    • elem.classList.add/remove("class") – добавляет/удаляет класс class
    • elem.classList.toggle("class") – если класса class нет, добавляет его, если есть – удаляет.

data-*

С помощью нестандартных атрибутов можно привязать к элементу данные, которые будут доступны в 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>

Add and Del

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 вставлять строку:

  1. beforeBegin – перед elem.
  2. afterBegin – внутрь elem, в самое начало.
  3. beforeEnd – внутрь elem, в конец.
  4. afterEnd – после elem.
  • elem.insertAdjacentElement(where, newElem) – вставляет в произвольное место не строку HTML, а элемент newElem.
  • elem.insertAdjacentText(where, text) – создаёт текстовый узел из строки text и вставляет его в указанное место относительно 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.

Styles

Свойство 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';

Styles

Свойство 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>

Styles

Свойство style содержит лишь тот стиль, который указан в атрибуте элемента, без учёта каскада CSS

Для того, чтобы получить текущее используемое значение свойства, используется метод window.getComputedStyle

getComputedStyle(element[, pseudo])

element - элемент, значения для которого нужно получить

pseudo - указывается, если нужен стиль псевдо-элемента, например "::before". Пустая строка или отсутствие аргумента означают сам элемент.

Size

Size

offsetParent – «родитель по дереву рендеринга» – ближайшая ячейка таблицы, body для статического позиционирования или ближайший позиционированный элемент для других типов позиционирования.

offsetLeft/offsetTop – позиция в пикселях левого верхнего угла блока, относительно его offsetParent.

offsetWidth/offsetHeight – «внешняя» ширина/высота блока, включая рамки.

 

clientLeft/clientTop – отступ области содержимого от левого-верхнего угла элемента. Если операционная система располагает вертикальную прокрутку справа, то равны ширинам левой/верхней рамки, если же слева (ОС на иврите, арабском), то clientLeft включает в себя прокрутку.

clientWidth/clientHeight – ширина/высота содержимого вместе с полями padding, но без полосы прокрутки.

scrollWidth/scrollHeight – ширина/высота содержимого, включая прокручиваемую область. Включает в себя padding и не включает полосы прокрутки.

scrollLeft/scrollTop – ширина/высота прокрученной части документа, считается от верхнего левого угла.

Scroll

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) относительно окна

DOM

By Victoria Budyonnaya

Made with Slides.com

DOM

  • 338

More from Victoria Budyonnaya