int(1)

Шпаргалка по работе с DOM

Turing Bootcamp 15.10.2021 0

Создание элементов

document.createElement(tag) — создать элемент с тегом tag
document.createTextNode(txt) — создать текстовый узел с текстом txt
node.cloneNode(deep) — клонировать существующий узел, если deep=true то с подузлами.

Свойства узлов

node.nodeType — тип узла: 1(элемент) / 3(текст) / другие.
elem.tagName — тег элемента.
elem.innerHTML — HTML внутри элемента.
node.data — содержимое любого узла любого типа, кроме элемента.

Ссылки

document.documentElement — элементdocument.body — элемент

По всем узлам:

parentNode
nextSibling previousSibling
childNodes firstChild lastChild

Только по элементам:

Дети: children (В IE 8- также содержит комментарии)
Соседи, кроме IE8-: nextElementSibling previousElementSibling
Дети, кроме IE8-: firstElementChild lastElementChild

Таблицы

table.rows[N] — строка TR номер N.
tr.cells[N] — ячейка TH/TD номер N.
tr.sectionRowIndex — номер строки в таблице в секции THEAD/TBODY.
td.cellIndex — номер ячейки в строке.

Формы

document.forms[N/name] — форма по номеру/имени.
form.elements[N/name] — элемент формы по номеру/имени
element.form — форма для элемента.

Поиск

document.getElementById(id) — По уникальному id
document.getElementsByName(name) — По атрибуту name, в IE<10 работает только для элементов, где name предусмотрен стандартом.
(elem/doc).getElementsByTagName(tag) — По тегу tag
(elem/doc).getElementsByClassName(class) — По классу, IE9+, корректно работает с элементами, у которых несколько классов.
(elem/doc).querySelectorAll(css) — По селектору CSS3, в IE8 по CSS 2.1
(elem/doc).querySelector(css) — По селектору, только первый элемент

Изменение

parent.appendChild(newChild)
parent.removeChild(child)
parent.insertBefore(newChild, refNode)
parent.insertAdjacentHTML(«beforeBegin|afterBegin|beforeEnd|afterEnd», html)

Классы и стили

elem.className — Атрибут class
elem.classList.add(class) remove(class) toggle(class) — Управление классами в HTML5, для IE8+ есть эмуляция.
elem.style.display — Стиль в атрибуте style элемента
getComputedStyle(elem, »).display — Стиль с учётом CSS и style на элементе

Размеры и прокрутка элемента

clientLeft/Top — Ширина левой/верхней рамки border
clientWidth/Height — Ширина/высота внутренней части элемента, включая содержимое и padding, не включая полосу прокрутки (если есть).
scrollWidth/Height — Ширина/высота внутренней части элемента, с учетом прокрутки.
scrollLeft/Top — Ширина/высота прокрученной области.
offsetWidth/Height — Полный размер элемента: ширина/высота, включая border.

Размеры и прокрутка страницы

ширина/высота видимой области: document.documentElement.clientHeight
прокрутка(чтение): window.pageYOffset || document.documentElement.scrollTop
прокрутка(изменение): window.scrollBy(x,y): на x,y относительно текущей позиции.
window.scrollTo(pageX, pageY): на координаты в документе.
elem.scrollIntoView(true/false): прокрутить, чтобы elem стал видимым и оказался вверху окна(true) или внизу(false)

Координаты

относительно окна: elem.getBoundingClientRect()
относительно документа: elem.getBoundingClientRect() + прокрутка страницы
получить элемент по координатам: document.elementFromPoint(clientX, clientY)

Обучение программирование с гарантией трудоустройства!

Поделиться
Интересные статьи:
Turing Bootcamp 16.08.2021 Плюсы и минусы JavaScript Взвесив все «за» и «против» JavaScript, мы можем представить себе полную картину этой области. Хотя JavaScript - это область со...
Turing Bootcamp 24.03.2021 🎬 7 интересных фактов о фильме «Социальная сеть» 1.Начальная сцена с участием Джесси Айзенберга и Руни Мара заняла 8 страниц сценария, для того, чтобы ее снять потребовалось...
Turing Bootcamp 30.08.2021 Брендан Эйх о создании JavaScript за 10 дней 1995 год был другой эпохой и другим миром. В то время Netscape считала комбинацию браузер / сервер новым видом...