Основные свойства и методы

HTML = document.documentElement
BODY = document.body
HEAD = document.head

Большинство методов возвращают не один элемент, а коллекцию.

По идентификатору — document.getElementById('id')
только в контексте document

По тегу — element.getElementsByTagName(tag)

element.getElementsByTagName("*")

вернет всех потомков element

По имени класса — element.getElementsByClassName(className)
По css-селектору:
element.querySelectorAll(selector)
element.querySelector(selector)

element.matches(selector) — проверяет, удовлетворяет ли element селектору
element.closest(selector) — ищет ближайший элемент подходящий под селектор (выше по дереву, включая сам element)

По атрибуту name document.getElementsByName(name)

Семья элементов

*коллекции элементов не являются массивами (псевдомассивы)

Дети

element.childNodes содержит все дочерние узлы, в т.ч. текстовые
ТОЛЬКО ДЛЯ ЧТЕНИЯ
element.children содержит все дочерние узлы-элементы
ТОЛЬКО ДЛЯ ЧТЕНИЯ
element.hasChildNodes() есть ли дочерние элементы
element.firstChild первый дочерний узел
element.childNodes[0]
element.firstElementChild первый дочерний узел-элемент
element.childNodes[0]
element.lastChild последний дочерний узел
element.childNodes[element.childNodes.length - 1]
element.lastElementChild последний дочерний узел-элемент
element.childNodes[element.childNodes.length - 1]

Родитель

element.parentNode родительский узел
document.documentElement.parentNode == document
element.parentElementNode родительский узел-элемент
document.documentElement.parentElement == null

Соседи

element.previousSibling предыдущий братский узел
element.previouselementSibling предыдущий братский узел-элемент
element.nextSibling следующий братский узел
element.nextElementSibling следующий братский узел-элемент

Конкретные элементы

Таблицы

table.rows – коллекция строк TR таблицы.
table.caption/tHead/tFoot – ссылки на элементы таблицы CAPTION, THEAD, TFOOT.
table.tBodies – коллекция элементов таблицы TBODY, по спецификации их может быть несколько.
tbody.rows – коллекция строк TR секции.
tr.cells – коллекция ячеек TD/TH
tr.sectionRowIndex – номер строки в текущей секции THEAD/TBODY
tr.rowIndex – номер строки в таблице
td.cellIndex – номер ячейки в строке

0 комментариев

Оставить комментарий

*Доступные HTML-теги: a, abbr, blockquote, code, pre, del, i, em, strong, b, strike
*Не будет опубликован