DOM

Манипуляции с элементами

Что такое DOM?

DOM (Document Object Model) - объектная модель, используемая для XML/HTML-документов.

DOM (Document Object Model) - объектная модель, используемая для XML/HTML-документов.

DOM - это представление документа в виде дерева тегов. Это дерево образуется за счет вложенной структуры тегов плюс текстовые фрагменты страницы, каждый из которых образует отдельный узел.

Выбор элементов на странице

<div class=“content” id=“news” name=“worldNews”></div>

1. по ID
var divNews = document.getElementById(“news”);
2. по значению атрибута name
var divNews = document.getElementsByName(“worldNews”);
3. по типу
var divs = document.getElementsByTagName(“div”);
4. Выбор элементов по классу CSS
var contents = document. .getElementsByClassName(“content”)

5. Выбор по css селектору
var divs = document. querySelectorAll(“div”)
var div = document. querySelector(“div”)

Перебор узлов
(перемещение по узлам дерева)

.childNodes (возвращает live-коллекцию дочерних элементов данного элемента)
.firstChild/ lastChild (возвращает первого/последнего потомка узла в древе или null, если узел является бездетным)
.children(возвращает живую коллекцию (HTMLCollection) дочерних элементов узла)
 

.parentElement(родительский элемент текущего узла. Это всегда объект DOM Element, или null)

.previousElementSibling/ .nextElementSibling (возвращает узел непосредственно предшедстующий /слудающий за указанному в родительском списке childNodes, или null )
.firstElementChild/ .lastElementChild (возвращает первый/последний дочерний элемент или null)

Манипуляции с содержимым элементов


.nodeType (возвращает беззнаковое короткое целочисленное значение, представляющее тип узла)

.nodeName(возвращает имя текущего узла в виде строки)

.tagName(Возвращает HTML-тег элемента ("div", "p", "a" и т.д))
.innerHTML(устанавливает или получает всю разметку и содержание внутри данного элемента) 

.outerHTML(возвращает полный HTML элемента)

Работа с атрибутами


.hasAttribute(attrName) - метод возвращает Boolean значение указывающее, имеет ли указанный элемент указанный атрибут или нет
.getAttribute(attrName) - возвращает значение именованного атрибута выбранного элемента
 

.setAttribute(name, value) - Добавляет новый атрибут или изменяет значение существующего атрибута у выбранного элемента
.removeAttribute(attrName) - Удаляет атрибут у выбранного элемента
.dataset - позволяет из javascript получить доступ к атрибутам data-*, установленным для html-элемента.

Работа с классами

  1. className - Свойство отвечает за значение атрибута class элемента.
  2. classList - Свойство classList возвращает псевдомассив, содержащий все классы элемента.

Методы classList

.contains(string) - Проверяет, есть ли данный класс у элемента (вернет true или false)

.add(string) - Добавляет элементу указанные классы

.remove(string) - Удаляет у элемента указанные классы

.toggle ( String [, Boolean]) - Если класс у элемента отсутствует - добавляет, иначе - убирает. Когда вторым параметром передано false - удаляет указанный класс, а если true - добавляет.

Создание/ добавление/ удаление узлов

  • createElement(tag)
  • createTextNode(text)
  • cloneNode(true)/cloneNode(false)
  • appendChild(elem)
  • insertBefore(elem, nextSibling)
  • removeChild(elem)
  • replaceChild(elem, currentElem)

 

 

Работа со стилями

  • element.style - возвращает объект который описывает стили элемента
  • getComputedStyle(element) - возвращает объект, с помощью методов которого можно получить значения интересующих нас свойств

Размеры и расположение элементов

  • offsetLeft/ offsetTop -  отступ слева/сверху относительно родительского элемента.

  • offsetWidth/ offsetHeight - высота/ширина элемента с учетом полей и границ в пикселях. Свойство неизменяемое, только для чтения. Возвращаемое значение - целочисленное

  • clientLeft/ client Top - Содержит ширину левой/верхней рамки элемента.

  • scrollWidth/ scrollHeight - ширина/высота  элемента c учетом полосы прокрутки.

  • scrollLeft/ scrollTop - получает или устанавливает количество пикселей, на которое контент элемента прокручен влево/вверх

Координаты

  • elem.getBoundingClientRect() - возвращает координаты элемента

  • document.elementFromPoint(x,y) - Возвращает элемент, который находится на координатах (x, y) относительно окна

  • pageX/pageY - Координаты курсора относительно документа

  • clientX/clientY - координаты курсора относительно текущего окна

 

!Kоординаты pageX/pageY не меняются при прокрутке, в отличие от clientX/clientY.

Made with Slides.com