Dom api что это
Манипуляции с DOM на чистом JavaScript
Авторизуйтесь
Манипуляции с DOM на чистом JavaScript
Как правило, когда нужно выполнить какие-либо действия с DOM, разработчики используют jQuery. Однако практически любую манипуляцию с DOM можно сделать и на чистом JavaScript с помощью его DOM API.
Рассмотрим этот API более подробно:
В конце вы напишете свою простенькую DOM-библиотеку, которую можно будет использовать в любом проекте.
DOM-запросы
В материале представлены основы JavaScript DOM API. Все подробности и детали доступны на Mozilla Developer Network.
Он вернёт первый подходящий элемент. Можно и наоборот — проверить, соответствует ли элемент селектору:
Если нужно получить все элементы, соответствующие селектору, используйте следующую конструкцию:
Если же вы знаете, на какой родительский элемент нужно сослаться, можете просто проводить поиск среди его дочерних элементов, вместо того чтобы искать по всему коду:
Также querySelectorAll() собирает всё в один список, что делает его не очень эффективным.
Как работать со списками?
У каждого элемента есть некоторые свойства, ссылающиеся на «семью».
Поскольку интерфейс элемента ( Element ) унаследован от интерфейса узла ( Node ), следующие свойства тоже присутствуют:
Добавление классов и атрибутов
Добавить новый класс очень просто:
Добавление свойства для элемента происходит точно так же, как и для любого объекта:
4–5 декабря, Онлайн, Беcплатно
Добавление CSS-стилей
Добавляют их точно так же, как и другие свойства:
Изменение DOM
Можно перемещать элементы:
Если не хочется перемещать, но нужно вставить копию, используем:
Конечно, вы можете создавать новые элементы:
А затем вставлять их как было показано выше. Удалить элемент напрямую не получится, но можно сделать это через родительский элемент:
Можно обратиться и косвенно:
Методы для элементов
На самом деле изменение HTML — плохая идея, т. к. теряются все изменения, которые были сделаны ранее, а также перегружаются обработчики событий. Лучше использовать такой способ только полностью отбросив весь HTML и заменив его копией с сервера. Вот так:
Обработчики событий
Один из самых простых обработчиков:
Свойство event.target обращается к элементу, за которым закреплено событие.
А так вы сможете получить доступ ко всем свойствам:
Предотвращение действий по умолчанию
Наследование
И ещё один плюс данного метода заключается в том, что к новым дочерним элементам обработчик будет привязываться автоматически.
Анимация
Таким способом достигается очень плавная анимация. В своей статье Марк Браун рассуждает на данную тему.
Пишем свою библиотеку
Теперь у вас есть своя маленькая библиотека, в которой находится всё, что вам нужно.
Здесь находится ещё много таких помощников.
Пример использования
Заключение
Теперь вы знаете, что для реализации простого модального окна или навигационного меню не обязательно прибегать к помощи сторонних фреймворков. Ведь в DOM API это уже всё есть, но, конечно, у данной технологии есть и свои минусы. Например всегда приходится вручную обрабатывать списки элементов, в то время как в jQuery это происходит по щелчку пальцев.
Работа с DOM-моделью
Каждый объект Window имеет свойство document, ссылающееся на объект Document. Этот объект Document не является автономным объектом. Он является центральным объектом обширного API, известного как объектная модель документа (DOM), который определяет порядок доступа к содержимому документа.
Обзор модели DOM
— это фундаментальный прикладной программный интерфейс, обеспечивающий возможность работы с содержимым HTML и XML-документов. Прикладной программный интерфейс (API) модели DOM не особенно сложен, но в нем существует множество архитектурных особенностей, которые вы должны знать.
Прежде всего, следует понимать, что вложенные элементы HTML или XML-документов представлены в виде дерева объектов DOM. Древовидное представление HTML-документа содержит узлы, представляющие элементы или теги, такие как и
, и узлы, представляющие строки текста. HTML-документ также может содержать узлы, представляющие HTML-комментарии. Рассмотрим следующий простой HTML-документ:
DOM-представление этого документа приводится на следующей диаграмме:
Тем, кто еще не знаком с древовидными структурами в компьютерном программировании, полезно узнать, что терминология для их описания была заимствована у генеалогических деревьев. Узел, расположенный непосредственно над данным узлом, называется родительским по отношению к данному узлу. Узлы, расположенные на один уровень ниже другого узла, являются дочерними по отношению к данному узлу. Узлы, находящиеся на том же уровне и имеющие того же родителя, называются сестринскими. Узлы, расположенные на любое число уровней ниже другого узла, являются его потомками. Родительские, прародительские и любые другие узлы, расположенные выше данного узла, являются его предками.
Тип Node и его подтипы образуют иерархию типов, изображенную на диаграмме ниже. Обратите внимание на формальные отличия между обобщенными типами Document и Element, и типами HTMLDocument и HTMLElement. Тип Document представляет HTML и XML-документ, а класс Element представляет элемент этого документа. Подклассы HTMLDocument и HTMLElement представляют конкретно HTML-документ и его элементы:
На этой диаграмме следует также отметить наличие большого количества подтипов класса HTMLElement, представляющих конкретные типы HTML-элементов. Каждый из них определяет JavaScript-свойства, отражающие HTML-атрибуты конкретного элемента или группы элементов. Некоторые из этих специфических классов определяют дополнительные свойства или методы, которые не являются отражением синтаксиса языка разметки HTML.
Выбор элементов документа
Работа большинства клиентских программ на языке JavaScript так или иначе связана с манипулированием элементами документа. В ходе выполнения эти программы могут использовать глобальную переменную document, ссылающуюся на объект Document. Однако, чтобы выполнить какие-либо манипуляции с элементами документа, программа должна каким-то образом получить, или выбрать, объекты Element, ссылающиеся на эти элементы документа. Модель DOM определяет несколько способов выборки элементов. Выбрать элемент или элементы документа можно:
по значению атрибута id;
по значению атрибута name;
по имени класса или классов CSS;
по совпадению с определенным селектором CSS.
Все эти приемы выборки элементов описываются в следующих подразделах.
Выбор элементов по значению атрибута id
Это самый простой и самый распространенный способ выборки элементов. Если сценарию необходимо иметь возможность манипулировать каким-то определенным множеством элементов документа, присвойте значения атрибутам id этих элементов и используйте возможность их поиска по этим значениям.
В версиях Internet Explorer ниже IE8 метод getElementById() выполняет поиск значений атрибутов id без учета регистра символов и, кроме того, возвращает элементы, в которых будет найдено совпадение со значением атрибута name.
Выбор элементов по значению атрибута name
Выбрать HTML-элементы, опираясь на значения их атрибутов name, можно с помощью метода getElementsByName() объекта Document:
Метод getElementsByName() определяется не классом Document, а классом HTMLDocument, поэтому он доступен только в HTML-документах и не доступен в XML-документах. Он возвращает объект NodeList, который ведет себя, как доступный только для чтения массив объектов Element.
В IE метод getElementsByName() возвращает также элементы, значения атрибутов id которых совпадает с указанным значением. Чтобы обеспечить совместимость с разными версиями браузеров, необходимо внимательно подходить к выбору значений атрибутов и не использовать одни и те же строки в качестве значений атрибутов name и id.
Выбор элементов по типу
Метод getElementsByTagName() объекта Document позволяет выбрать все HTML или XML-элементы указанного типа (или по имени тега). Например, получить подобный массиву объект, доступный только для чтения, содержащий объекты Element всех элементов в документе, можно следующим образом:
Подобно методу getElementsByName(), getElementsByTagName() возвращает объект NodeList. Элементы документа включаются в массив NodeList в том же порядке, в каком они следуют в документе, т.е. первый элемент
в документе можно выбрать так:
Можно получить NodeList, содержащий все элементы документа, если передать методу getElementsByTagName() шаблонный символ «*».
Кроме того, классом Element также определяет метод getElementsByTagName(). Он действует точно так же, как и версия метода в классе Document, но выбирает только элементы, являющиеся потомками для элемента, относительно которого вызывается метод. То есть отыскать все элементы внутри первого элемента
можно следующим образом:
Форум
Справочник
Введение. DOM в примерах.
Простейший DOM
Построим, для начала, дерево DOM для следующего документа.
Пример посложнее
Рассмотрим теперь более жизненную страничку:
А вот так выглядит дерево, если изобразить его прямо на HTML-страничке:
Кстати, дерево на этом рисунке не учитывает текст, состоящий из одних пробельных символов. Например, такой текстовый узел должен идти сразу после
- . DOM, не содержащий таких «пустых» узлов, называют «нормализованным».
Пример с атрибутами и DOCTYPE
Рассмотрим чуть более сложный документ.
Однако, в веб-программировании в эти дебри обычно не лезут, и считают атрибуты просто свойствами DOM-узла, которые, как мы увидим в дальнейшем, можно устанавливать и менять по желанию программиста.
Вообще-то это секрет, но DOCTYPE тоже является DOM-узлом, и находится в дереве DOM слева от HTML (на рисунке этот факт скрыт).
Нормализация в различных браузерах
При разборе HTML Internet Explorer сразу создает нормализованный DOM, в котором не создаются узлы из пустого текста.
На рисунке для краткости текстовые узлы обозначены просто решеткой. У body вместо 3 появилось 7 детей.
Opera тоже имеет чем похвастаться. Она может добавить лишний пустой элемент «просто от себя».
У меня получается 3 для IE, 7 для Firefox и 8 (!?) для Opera.
На практике эта несовместимость не создает больших проблем, но нужно о ней помнить. Например, разница может проявить себя в случае перебора узлов дерева.
Возможности, которые дает DOM
Зачем, кроме красивых рисунков, нужна иерархическая модель DOM?
Каждый DOM-элемент является объектом и предоставляет свойства для манипуляции своим содержимым, для доступа к родителям и потомкам.
В современных скриптах этот метод почти не используется, случаи его правильного применения можно пересчитать по пальцам.
Разберем подробнее способы доступа и свойства элементов DOM.
Доступ к элементам
Начнем с вершины дерева.
document.documentElement
document.body
Типы DOM-элементов
У каждого элемента в DOM-модели есть тип. Его номер хранится в атрибуте elem.nodeType
Всего в DOM различают 12 типов элементов.
Остальные типы в javascript программировании не используются.
Пример
Например, вот так выглядел бы в браузере документ из примера выше, если каждый видимый элемент обвести рамкой с цифрой nodeType в правом верхнем углу.
Дочерние элементы
Этих свойств вполне хватает для удобного обращения к соседям.
Свойства элементов
Рассмотрим здесь еще некоторые (не все) свойства элементов, полезные при работе с DOM.
tagName
Атрибут есть у элементов-тегов и содержит имя тега в верхнем регистре, только для чтения.
style
Это свойство управляет стилем. Оно аналогично установке стиля в CSS.
Например, можно установить element.style.width :
Исходный код этой кнопки:
Например, для установки свойства z-index в 1000, нужно поставить:
innerHTML
Когда-то это свойство поддерживалось только в IE. Теперь его поддерживают все современные браузеры.
Оно содержит весь HTML-код внутри узла, и его можно менять.
Свойство innerHTML применяется, в основном, для динамического изменения содержания страницы, например:
className
Это свойство задает класс элемента. Оно полностью аналогично html-атрибуту «class».
Новинки DOM API
В данной статье я расскажу о новинках в DOM API, которые мы можем использовать уже сейчас или в ближайшем будущем.
Публикация статьи приурочена к радостному событию начала реализации некоторых новых DOM4 API методов в Google Chrome. Многие методы и свойства можно использовать уже сейчас, некоторые из них работают через префиксы, но к каждому методу или свойству я постараюсь дать Polyfill, реализующий их или отбрасывающий браузерные префиксы.
Методы я постарался описать в соответствии с JSDoc для Google Closure Compiler.
DOM4 Mutation methods
У Element.prototype появился ряд очень интересных методов, которые будут знакомы любителям jQuery, однако работают несколько по-другому.
Все эти методы не имеют возвращаемого значения.
Вот такой паттерн позволит вам передавать в этот метод NodeList или массив с нодами:
Из всех DOM4 Mutation methods только remove реализован в последней версии Google Chrome.
Polyfill этих методов для всех браузеров есть в моей библиотеке.
DOM Selector API 2: NodeRef и :scope
Второй параметр позволяет указать контекст, в котором мы будет искать ноды по селектору. Например:
Псевдо класс :scope позволяет делать действительно класные вещи. Это ещё один способ указать контекст поиска — он указывает на текущий элемент, в котором мы проводим поиск по селектору.
Он позволяет искать по ранее не валидным селекторам «>.class» или «
tagname». Просто укажите :scope вначале и данные селекторы станут валидными. Вся мощь :scope видна, когда
мы применяем его вместе с NodeRef:
Element.prototype.matches
Этот метод ранее назывался matchesSelector. Он проверяет ноду на соответствие CSS-селектору.
Маленький polyfill с отбрасывание браузерных префиксов: gist. Более расширенный вариант у меня в библиотеке.
classList
DOM API для работы с CSS-классами элемента.
Events Constructor
В новом стандарте DOM API определены конструкторы для событий. Теперь мы можем забыть про мучения с
Если необходимо добавить данные для обработчика, надо просто добавить их в объект event :
Замечу, что при этом все созданные таким способом события являются обычными событиями, т.е. new Event(«click») создаст не MouseEvent, а просто Event.
Конструкторы Event и CustomEvent реализованы во всех современных браузерах (уже больше года) кроме Android WebKit браузеров. Polyfill для старых браузеров.
HTMLLabelElement.prototype.control и HTML*Element.prototype.labels для элементов формы
Свойство control содержит ссылку на элемент формы с которым связан данный элемент:
Напомню, что по спецификации, у одного элемента может быть только один связанный элемент формы.
Свойство labels, наоборот, содержит NodeList элементов для элемента формы. NodeList потому, что по спецификации у одного элемента формы может быть несколько связанных элементов.
Свойства реализованы в большинстве браузеров. Polyfill для старых браузеров
HTMLOlElement.prototype.reversed
Свойство reversed у нумерованного списка, заставляет нумерацию идти в обратную сторону. При это учитывается свойство start. Вот простые примеры, которые должны сказать больше слов:
Будет интерпретировано браузером как:
будет интерпретирована браузером как:
Поддержка свойства reversed есть в Google Chrome. Для остальных браузеров есть Polyfill.
Event.prototype.stopImmediatePropagation
Метод работает аналогично такому же методу из jQuery.
Вкратце, он не только останавливает всплытие события но обработку события сразу же, не выполняя следующие обработчики этого события.
Только Opera до версии 12.10 не поддерживает этот метод. Polyfill для неё.
Объектная модель документа: что такое DOM и чем не является?
Что такое DOM, и где ее искать? Разбираемся, как выглядит объектная модель документа, для чего нужна и чем отличается от простого HTML-кода.
Объектная модель документа, aka DOM, – это интерфейс, с помощью которого программы могут работать с контентом, структурой и стилями веб-страницы. Проще говоря – это набор методов, которые можно вызвать, и свойств, к которым можно обратиться.
Чтобы лучше разобраться, что такое объектная модель документа, давайте посмотрим, как она создается.
Создание веб-страницы
Путь от исходного HTML в вашем файле до отображения в браузере оформленной страницы, с которой можно взаимодействовать, называется критическим путем отрисовки (critical rendering path). Его можно разбить на два больших этапа:
Дерево рендера, или дерево визуализации, – это специальная структура, состоящая из HTML-элементов, которые будут отображены на странице, и связанных с ними стилей. Это дерево собирается из двух компонентов:
Таким образом, формирование DOM предшествует формированию готовой страницы.
Как выглядит DOM?
DOM – это объектное представление исходного HTML-документа, попытка преобразовать его структуру и содержимое в объектную модель, с которой смогли бы работать различные программы.
Для примера возьмем простой документ:
Он может быть представлен в виде дерева узлов:
Чем DOM не является?
Возможно, пример выше заставил вас подумать, что DOM – это то же самое, что и исходный HTML-документ, или то, что вы видите в браузере в консоли разработчика. Это не совсем так. И вместо того, чтобы описывать, что такое DOM, попробуем разобраться, чем DOM не является.
DOM – это не HTML-код
Безусловно, DOM создается из исходного HTML-кода. Но объектная модель не всегда полностью соответствует своему прообразу. Почему так происходит?
Невалидный HTML
DOM всегда валидна, поэтому в процессе создания браузер может поправить некоторые ошибки исходного кода, например, добавить пропущенный tbody или закрыть какой-нибудь незакрытый тег.
Например, такой невалидный HTML-код:
превратится в такую валидную объектную модель:
Браузер самостоятельно добавил теги head и body, которые требуются по спецификации.
Модификация с помощью JavaScript
DOM позволяет не только просматривать содержимое страницы, но и взаимодействовать с ним, изменять. Это не статичное отображение, а живой ресурс.
Например, с помощью JavaScript можно создать дополнительные элементы:
DOM после этого обновится, а исходный HTML, разумеется, останется таким же, как был.
Страница может заполняться контентом, полученным асинхронно с сервера с помощью AJAX-запросов. Эта операция также не затрагивает исходный код, но изменяет объектную модель.
DOM – это не код страницы
Аналогично, то, что вы видите, нажав Просмотреть код страницы (горячая комбинация Ctrl+U ), также не является объектной моделью документа, ведь по сути это и есть исходный HTML-код.
Впрочем, если вы используете какой-нибудь шаблонизатор и рендерите HTML на сервере, исходный код страницы будет отличаться от того кода, который вы видите в браузере.
DOM – это не дерево рендера
Дерево рендера – это то, что вы видите, открыв страницу в браузере. Вы помните, что оно образуется из комбинации DOM и CSSOM.
Дерево рендера состоит только из видимых на экране элементов, и это его ключевое отличие от DOM. Например, вы не найдете здесь элементов, для которых установлено CSS-правило display: none. Они не видны, не занимают места на странице и не участвуют в рендере.
Видите скрытый с помощью инлайнового стиля параграф?
Вы можете найти его в DOM:
но не в дереве рендера:
DOM – это не содержимое DevTools
Тут разница не такая очевидная, как в случае дерева рендеринга. Панель разработчика имеет максимально близкую к DOM реализацию, но все же они не идентичны. В DevTools можно найти информацию, которой нет в DOM.
Так что в инструментах разработчика псевдоэлементы есть:
а в DOM – нет. Именно поэтому с ними нельзя взаимодействовать из JavaScript, ведь они не являются частью объектной модели документа.
Что же такое объектная модель документа?
DOM – это интерфейс HTML-страницы и первый этап ее отрисовки в браузере.
DOM очень близок к другим формам представления исходного HTML-кода, но все же не идентичен им.
Основные характеристики объектной модели:
Объектная модель документа – очень полезная штука. Благодаря ей JavaScript может взаимодействовать со страницей, изменять ее содержимое, структуру и стили. Именно благодаря DOM вы можете отслеживать клиентские события.
Например, повесим обработчик события mouseenter на элемент заголовка:
Элемент заголовка здесь – это узел DOM-дерева, к которому мы смогли обратиться с помощью DOM-метода addEventListener. Когда событие наведения мыши произойдет, DOM-элемент распространит его выше по дереву DOM и сообщит нам об этом.
DOM – понятие, специфичное для браузерной среды выполнения кода. Это не JavaScript, а лишь API, которым JavaScript может пользоваться.