Создание элементов
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 - элемент <HTML>
document.body - элемент <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)
Комментариев нет:
Отправить комментарий