На этом занятии мы поговорим о том как можно добавлять и удалять элементы в DOM-дереве, то есть, фактически в HTML-документе. И начнем с такого примера. Предположим, мы хотим создать вот такое сообщение:
Но будем это делать посредством JavaScript. Поэтому тег div уберем. Теперь, чтобы создать элемент div, воспользуемся методом
и пропишем его так:
Далее, укажем класс стилей и содержимое:
Все, теперь переменная div является объектом для представления тега div с классом msg и строкой «Важная информация!». Но этот объект пока еще не является частью DOM-дерева, а значит, не содержится в HTML-документе. Если мы сейчас обновим страницу, то ничего на ней не увидим.
Для размещения объекта на HTML-странице существует несколько методов. Сейчас мы воспользуемся методом append, который может быть вызван из любого узла DOM-дерева для добавления объекта как дочернего в конец списка. Например, добавим наш div в раздел body:
И если теперь посмотрим структуру HTML-документа, то увидим, что div идет последним в списке дочерних элементов раздела body.
Обратите внимание, что эти методы могут вставлять не только объекты-теги, но и текстовые элементы как строки. Чтобы все было понятнее, рассмотрим работу этих методов на таком примере. Пусть у нас имеется документ:
И выполним следующие операции:
В результате до и после списка вставятся текстовые элементы со значениями before и after. Далее:
будет добавлен первый и последний элемент в список. И, наконец, вот такая операция:
заменяет весь список новой информацией: тегом hr, строкой «замена» и тегом br.
Вот этот последний пример показывает, что данные методы могут принимать сразу более одного аргумента для вставки нескольких элементов.
Методы append/prepend/before/after позволяют также перемещать уже существующие элементы. То есть, когда мы вставляем имеющийся элемент, он автоматически удаляется со своего прежнего места и добавляется в новое. Например, у нас есть исходный список и мы хотим «солнце» поместить после «земли». Это можно сделать так:
В JavaScript помимо создания элементов-тегов с помощью метода createElement можно создавать и текстовые элементы. Для этого следует использовать метод
В результате мы получим простой текст внутри HTML-документа.
insertAdjacentHTML
Рассмотренные выше методы вставки добавляют либо отдельные теги, либо текстовую информацию. Причем, текст вставляется именно как текст, то есть, теги внутри текста будут отображены как текст. Например:
Но, что если мы хотим вставить строку как HTML-строку с обработкой всех тегов, а не как обычный текст? Как раз для этого используется метод insertAdjacentHTML, который имеет следующий синтаксис:
Для примера возьмем вот такой список:
И сделаем такие вставки:
Смотрите как разместились эти элементы.
вставит текст как строку, а
добавит соответствующий элемент.
Однако, на практике эти два метода почти не применяются. Вместо них удобнее использовать методы append/prepend/before/after просто потому, что легче писать. Если нам нужно удалить какой-либо узел из DOM-дерева, то для этого часто используется метод
Например, имеется список:
И мы из него хотим из него удалять последние пункты, пока полностью не очистим. Это можно сделать так:
cloneNode
Следующий метод cloneNode позволяет создавать клон узла DOM-дерева. Он имеет следующий синтаксис:
Если flDeep равен true, то создается «глубокий» клон объекта со всеми его свойствами и дочерними элементами. При значении false получаем клон без дочерних элементов.
Когда может пригодиться такая операция. Например, у нас есть вот такая таблица:
Мы хотим добавить в нее еще одну строку с планетой Венерой. Это можно сделать путем клонирования существующей строки и добавления клона в конец таблицы:
Все, теперь у нас появилась еще одна строчка с Венерой.
DocumentFragment
В JavaScript есть DOM-объект специального вида – DocumentFragment. Он как бы образует фрагмент документа со своим DOM-деревом, то есть, со своим содержимым. Затем, это содержимое можно целиком вставить в любое место HTML-документа. Приведем такой простой пример. Предположим, имеется пустой список:
И мы хотим в него вставить заготовленный фрагмент списка. Это может выглядеть так:
Но это лишь пример использования DocumentFragment. В данном конкретном случае все можно реализовать проще:
Вообще DocumentFragment используется крайне редко. Я здесь рассказал о нем, скорее, для целостности изложения материала. Хотя в ряде случаев он незаменим, например, при создании шаблонов документов. Но это выходит за рамки данного занятия.
Все эти методы работают вполне очевидным образом.
document.write
Это довольно древний метод, который появился в JavaScript когда даже не было понятия DOM-объектов и DOM-дерева. Данный метод позволяет добавлять HTML-содержимое в то место, где записан и имеет такой синтаксис:
Причем, срабатывает этот метод только в момент загрузки страницы. Если вызвать его после загрузки, то все содержимое HTML-документа будет удалено!
В качестве примера приведу такую страницу:
Если же мы выполним этот метод после полной загрузки, то получим следующее:
Видите? Все содержимое HTML-документа пропало и осталась только эта одна строка.
Но, несмотря на все эти особенности, метод document.write иногда применяют для динамического формирования HTML-страницы. Дело в том, что он срабатывает еще до построения DOM-дерева и все что он добавит в документ воспринимается браузером так, словно такая страница изначально была получена с сервера. И, в частности, так можно динамически добавлять теги с соответствующим содержимым и они будут исполняться после загрузки документа. Это существенный плюс данного метода в сравнении с другими рассмотренными на этом занятии. Но, все-таки, он все реже применяется и постепенно уходит в небытие.
Итак, по итогам этого занятия вы должны знать следующие методы:
Методы создания узлов
document.createElement(tag)
создает указанный объект-тег
document.createTextNode(value)
создает текстовый узел
создает клон элемента
Методы вставки и удаления узлов
elem.append(node [или text])
добавляет node (или текст) как последний дочерний элемент
elem.prepend(node [или text])
добавляет node (или текст) как первый дочерний элемент
elem.before(node [или text])
добавляет node (или текст) непосредственно перед объектом elem
elem.after(node [или text])
добавляет node (или текст) непосредственно после объекта elem
elem.replaceWith(node [или text])
заменяет объект elem другим объектом или текстовым элементом
Также желательно знать и устаревшие методы, так как они могут встретиться в сторонних скриптах:
Методы вставки и удаления узлов
parent.appendChild(node)
добавляет node как последний дочерний элемент у parent
parent.insertBefore(node, nextSibling)
вставляет элемент перед nextSibling
parent.removeChild(node)
удаляет элемент node (здесь parent является родителем node)
parent.replaceChild(newElem, node)
заменяет дочерний элемент node на новый newElem
elem.insertAdjacentHTML(where, html)
вставляет фрагмент html в зависимости от значения where
Отдельный метод вставки в момент загрузки
вставка фрагмента html в момент загрузки HTML-страницы
Видео по теме
JavaScipt (DOM) #1: объектная модель документа DOM и BOM
JavaScipt (DOM) #3: методы поиска элементов в DOM: querySelector, querySelectorAll, getElementById
Мультивставка: insertAdjacentHTML и DocumentFragment
Материал на этой странице устарел, поэтому скрыт из оглавления сайта.
Более новая информация по этой теме находится на странице https://learn.javascript.ru/modifying-document.
Обычные методы вставки работают с одним узлом. Но есть и способы вставлять множество узлов одновременно.
Оптимизация вставки в документ
Есть две возможных последовательности:
Сначала вставить UL в документ, а потом добавить к нему LI :
Полностью создать список «вне DOM», а потом – вставить в документ:
Как ни странно, между этими последовательностями есть разница. В большинстве браузеров, второй вариант – быстрее.
Почему же? Иногда говорят: «потому что браузер перерисовывает каждый раз при добавлении элемента». Это не так. Дело вовсе не в перерисовке.
Браузер достаточно «умён», чтобы ничего не перерисовывать понапрасну. В большинстве случаев процессы перерисовки и сопутствующие вычисления будут отложены до окончания работы скрипта, и на тот момент уже совершенно без разницы, в какой последовательности были изменены узлы.
Тем не менее, при вставке узла происходят разные внутренние события и обновления внутренних структур данных, скрытые от наших глаз.
Что именно происходит – зависит от конкретной, внутренней браузерной реализации DOM, но это отнимает время. Конечно, браузеры развиваются и стараются свести лишние действия к минимуму.
Бенчмарк
Чтобы легко проверить текущее состояние дел – вот два бенчмарка.
При этом первый вставляет все в документ тут же, второй – задерживает вставку TBODY в документ до конца процесса.
Кликните, чтобы запустить.
Код для тестов находится в файле insert-bench.js.
Добавление множества узлов
Продолжим работать со вставкой узлов.
Если новые элементы пришли в виде строки, то можно попробовать добавить их так:
А если нужно вставить в середину списка? Здесь innerHTML вообще не поможет.
insertAdjacent*
Метод insertAdjacentHTML позволяет вставлять произвольный HTML в любое место документа, в том числе и между узлами!
Строка HTML, которую нужно вставить
Куда по отношению к elem вставлять строку. Всего четыре варианта:
У этого метода есть «близнецы-братья»:
DocumentFragment
Оптимизация, о которой здесь идёт речь, важна в первую очередь для старых браузеров, включая IE9-. В современных браузерах эффект от неё, как правило, небольшой, а иногда может быть и отрицательным.
До этого мы говорили о вставке строки в DOM. А что делать в случае, когда надо в существующий UL вставить много DOM-элементов?
Создание, добавление и удаление элементов HTML страницы
Создание, добавление и удаление элементов HTML страницы
Здравствуйте! С помощью JavaScript можно не только находить элементы на странице (о том как это делать читайте здесь) но также создавать элементы динамически и добавлять их в DOM. О том как это делать и пойдет разговор в этом уроке.
Для того чтобы создать новый элемент на веб-странице — в объекте document есть следующие методы:
Добавление элемента
Рассмотрим небольшой пример:
Как видно из примера переменная elem будет хранить ссылку на новый элемент div. Однако как вы понимаете создания элементов недостаточно, их ведь еще надо добавить на веб-страницу. Ведь когда мы таким образом создаем элементы они как бы находятся в иаком виртуальном пространстве или в памяти ну а для того чтобы их отобразить на веб-странице существуют специальные методы.
Для добавления элементов на веб-страницу используются следующие методы:
Давайте рассмотрим пример присоединения элемента на веб-страницу, используя метод метод appendChild:
В пример был создан обычный элемент заголовка h3 и текстовый узел. Затем текстовый узел добавлен в элемент заголовка. После чего заголовок добавлен в один из элементов веб-страницы, чтобы его можно было увидеть на странице.
Но совсем необязательно для создания текста внутри элемента иметь дополнительный текстовый узел, для этого есть свойство textContent, которое позволяет напрямую присвоить текст элементу.
В таком случае текст будет создан неявно при непосредственной установке текста.
И давайте также рассмотрим, как этот элемент добавить в начало коллекции дочерних узлов блока div:
Если вдруг надо добавить новый узел на второе, третье или любое иное место, то надо найти узел, перед которым надо его собственно вставлять, с помощью следующих свойств firstChild/lastChild или nextSibling/previousSibling.
Методы вставки элементов
Чтобы наш div появился, нам нужно вставить его где-нибудь в document. Например, в элемент document.body.
Для этого есть метод append, в нашем случае: document.body.append(div).
Вот методы для различных вариантов вставки:
Вот пример использования этих методов, чтобы добавить новые элементы в список и текст до/после него:
Весь текст вставляется как текст.
Поэтому финальный HTML будет:
Другими словами, строки вставляются безопасным способом, как делает это метод elem.textContent.
Поэтому эти методы могут использоваться только для вставки DOM-узлов или текстовых фрагментов.
А что, если мы хотим вставить HTML именно «как html», со всеми тегами и прочим, как делает это elem.innerHTML?
insertAdjacentHTML/Text/Element
С этим может помочь другой, довольно универсальный метод: elem.insertAdjacentHTML(where, html).
Первый параметр – это специальное слово, указывающее, куда по отношению к элементу elem производить вставку. Значение должно быть одним из следующих:
Второй параметр – это HTML-строка, которая будет вставлена именно «как HTML».
Так мы можем добавлять произвольный HTML на страницу.
Варианты вставки: Мы можем легко заметить сходство между этой и предыдущей картинкой. Точки вставки фактически одинаковые, но этот метод вставляет код HTML.
У метода есть два брата:
Они существуют, в основном, чтобы унифицировать синтаксис. На практике часто используется только insertAdjacentHTML. Потому что для элементов и текста у нас есть методы append/prepend/before/after – их быстрее написать, и они могут вставлять как узлы, так и собственно текст.
Так что, вот альтернативный вариант показа сообщения:
Удаление узлов
Для удаления узла есть методы node.remove().
Например, сделаем так, чтобы наше сообщение удалялось через секунду:
Если нам нужно переместить элемент в другое место – нет необходимости удалять его со старого.
Все методы вставки автоматически удаляют узлы со старых мест.
Например, давайте поменяем местами элементы:
Клонирование узлов: cloneNode
Как вставить ещё одно подобное сообщение или склонировать элемент?
Мы могли бы создать функцию и поместить код туда. Альтернатива – клонировать существующий div и изменить текст внутри него (при необходимости).
Иногда, когда у нас есть большой элемент, это может быть быстрее и проще.
Пример копирования сообщения:
DocumentFragment
DocumentFragment является специальным DOM-узлом, который служит обёрткой для передачи списков узлов.
Мы можем добавить к нему другие узлы, но когда мы вставляем его куда-то, он «исчезает», вместо него вставляется его содержимое.
Обратите внимание, что на последней строке с (*) мы добавляем DocumentFragment, но он «исчезает», поэтому структура будет:
DocumentFragment редко используется. Зачем добавлять элементы в специальный вид узла, если вместо этого мы можем вернуть массив узлов? Переписанный пример:
Мы упоминаем DocumentFragment в основном потому, что он используется в некоторых других областях, например, для элемента template, который мы рассмотрим позднее.
Устаревшие методы вставки/удаления
Есть несколько других, более старых, методов вставки и удаления, которые существуют по историческим причинам.
Сейчас уже нет причин их использовать, так как современные методы append, prepend, before, after, remove, replaceWith более гибкие и удобные.
Мы упоминаем о них только потому, что их можно найти во многих старых скриптах:
parentElem.appendChild(node) Добавляет node в конец дочерних элементов parentElem.
parentElem.insertBefore(node, nextSibling)
Вставляет node перед nextSibling в parentElem.
Чтобы вставить newLi в начало, мы можем сделать вот так:
parentElem.replaceChild(node, oldChild)
Заменяет oldChild на node среди дочерних элементов parentElem.
parentElem.removeChild(node)
Удаляет node из parentElem (предполагается, что он родитель node).
Все эти методы возвращают вставленный/удалённый узел. Другими словами, parentElem.appendChild(node) вернёт node. Но обычно возвращаемое значение не используют, просто вызывают метод.
Итого
Также существуют похожие методы elem.insertAdjacentText и elem.insertAdjacentElement, они вставляют текстовые строки и элементы, но они редко используются.
Задания
createTextNode vs innerHTML vs textContent
Есть пустой DOM-элемент elem и строка text.
Какие из этих 3-х команд работают одинаково?
Очистите элемент
Создайте функцию clear(elem), которая удаляет всё содержимое из elem.
Создайте список
Напишите интерфейс для создания списка.
Для каждого пункта:
Все элементы должны создаваться динамически.
Создайте дерево из объекта
Напишите функцию createTree, которая создаёт вложенный список ul/li из объекта.
Выберите один из двух способов решения этой задачи:
Если получится – сделайте оба.
Выведите список потомков в дереве
Есть дерево, организованное в виде вложенных списков ul/li.
JavaScript предоставляет множество методов для работы с Document Object Model или сокращенно DOM (объектной моделью документа): одни из них являются более полезными, чем другие; одни используются часто, другие почти никогда; одни являются относительно новыми, другие признаны устаревшими.
Я постараюсь дать вам исчерпывающее представление об этих методах, а также покажу парочку полезных приемов, которые сделают вашу жизнь веб-разработчика немного легче.
Размышляя над подачей материала, я пришел к выводу, что оптимальным будет следование спецификациям с промежуточными и заключительными выводами, сопряженными с небольшими лирическими отступлениями.
Сильно погружаться в теорию мы не будем. Вместо этого, мы сосредоточимся на практической составляющей.
Для того, чтобы получить максимальную пользу от данной шпаргалки, пишите код вместе со мной и внимательно следите за тем, что происходит в консоли инструментов разработчика и на странице.
Вот как будет выглядеть наша начальная разметка:
У нас есть список ( ul ) с тремя элементами ( li ). Список и каждый элемент имеют идентификатор ( id ) и CSS-класс ( class ). id и class — это атрибуты элемента. Существует множество других атрибутов: одни из них являются глобальными, т.е. могут добавляться к любому элементу, другие — локальными, т.е. могут добавляться только к определенным элементам.
Мы часто будем выводить данные в консоль, поэтому создадим такую «утилиту»:
Миксин NonElementParentNode
Данный миксин предназначен для обработки (браузером) родительских узлов, которые не являются элементами.
В чем разница между узлами (nodes) и элементами (elements)? Если кратко, то «узлы» — это более общее понятие, чем «элементы». Узел может быть представлен элементом, текстом, комментарием и т.д. Элемент — это узел, представленный разметкой (HTML-тегами (открывающим и закрывающим) или, соответственно, одним тегом).
Небольшая оговорка: разумеется, мы могли бы создать список и элементы программным способом.
Для создания элементов используется метод createElement(tag) объекта Document :
Одним из основных способов получения элемента (точнее, ссылки на элемент) является метод getElementById(id) объекта Document :
Почему идентификаторы должны быть уникальными в пределах приложения (страницы)? Потому что элемент с id становится значением одноименного свойства глобального объекта window :
Миксин ParentNode
Данный миксин предназначен для обработки родительских элементов (предков), т.е. элементов, содержащих одного и более потомка (дочерних элементов).
Такая структура называется коллекцией HTML и представляет собой массивоподобный объект (псевдомассив). Существует еще одна похожая структура — список узлов (NodeList ).
Для дальнейших манипуляций нам потребуется периодически создавать новые элементы, поэтому создадим еще одну утилиту:
Наша утилита принимает 4 аргумента: идентификатор, текст, название тега и CSS-класс. 2 аргумента (тег и класс) имеют значения по умолчанию. Функция возвращает готовый к работе элемент. Впоследствии, мы реализуем более универсальный вариант данной утилиты.
Одной из интересных особенностей HTMLCollection является то, что она является «живой», т.е. элементы, возвращаемые по ссылке, и их количество обновляются автоматически. Однако, эту особенность нельзя использовать, например, для автоматического добавления обработчиков событий.
Создадим универсальную утилиту для получения элементов:
Наша утилита принимает 3 аргумента: CSS-селектор, родительский элемент и индикатор количества элементов (один или все). 2 аргумента (предок и индикатор) имеют значения по умолчанию. Функция возвращает либо один, либо все элементы (в виде обычного массива), совпадающие с селектором, в зависимости от значения индикатора:
Миксин NonDocumentTypeChildNode
Миксин ChildNode
Данный миксин предназначен для обработки дочерних элементов, т.е. элементов, являющихся потомками других элементов.
Интерфейс Node
Данный интерфейс предназначен для обработки узлов.
Интерфейс Document
Фрагменты позволяют избежать создания лишних элементов. Они часто используются при работе с разметкой, скрытой от пользователя с помощью тега template (метод cloneNode() возвращает DocumentFragment ).
createTextNode(data) — создает текст
createComment(data) — создает комментарий
importNode(existingNode, deep) — создает новый узел на основе существующего
Интерфейсы NodeIterator и TreeWalker
Интерфейсы NodeIterator и TreeWalker предназначены для обхода (traverse) деревьев узлов. Я не сталкивался с примерами их практического использования, поэтому ограничусь парочкой примеров:
Интерфейс Element
Данный интерфейс предназначен для обработки элементов.
Работа с classList
Работа с атрибутами
insertAdjacentElement(where, newElement) — универсальный метод для вставки новых элементов перед/в начало/в конец/после текущего элемента. Аргумент where определяет место вставки. Возможные значения:
insertAdjacentText(where, data) — универсальный метод для вставки текста
Text — конструктор для создания текста
Comment — конструктор для создания комментария
Объект Document
Свойства объекта location :
reload() — перезагружает текущую локацию
replace() — заменяет текущую локацию на новую
title — заголовок документа
head — метаданные документа
body — тело документа
images — псевдомассив ( HTMLCollection ), содержащий все изображения, имеющиеся в документе
Следующие методы и свойство считаются устаревшими:
Миксин InnerHTML
Геттер/сеттер innerHTML позволяет извлекать/записывать разметку в элемент. Для подготовки разметки удобно пользоваться шаблонными литералами:
Расширения интерфейса Element
Вот несколько полезных ссылок, с которых можно начать изучение этих замечательных инструментов:
Иногда требуется создать элемент на основе шаблонной строки. Как это можно сделать? Вот соответствующая утилита:
Существует более экзотический способ создания элемента на основе шаблонной строки. Он предполагает использование конструктора DOMParser() :
Еще более экзотический, но при этом самый короткий способ предполагает использование расширения для объекта Range — метода createContextualFragment() :
В завершение, как и обещал, универсальная утилита для создания элементов:
Заключение
Разумеется, шпаргалка — это всего лишь карманный справочник, памятка для быстрого восстановления забытого материала, предполагающая наличие определенного багажа знаний.
VDS от Маклауд быстрые и безопасные.
Зарегистрируйтесь по ссылке выше или кликнув на баннер и получите 10% скидку на первый месяц аренды сервера любой конфигурации!
Здравствуйте! С помощью JavaScript можно не только находить элементы на странице (о том как это делать читайте здесь) но также создавать элементы динамически и добавлять их в DOM. О том как это делать и пойдет разговор в этом уроке.
