Как вносить изменения в DOM

Как вносить изменения в DOM

От автора: в предыдущих двух частях курса о DOM мы узнали, как получать доступ к элементам в DOM, а также как перемещаться по DOM. С помощью этого разработчик можно использовать классы, теги, id, селекторы для поиска любого узла в DOM, а также использовать родительские, дочерние и смежные свойства для поиска родительских узлов.

Чтобы повысить свой уровень владения, необходимо научиться добавлять, заменять и удалять узлы — в общем, делать какое-либо изменение DOM. Приложение список дел – один из примеров JS программы, в которой понадобится создавать, изменять и удалять элементы из DOM.

В этом уроке мы узнаем, как создавать новые узлы и вставлять их в DOM, заменять существующие узлы, а также как их удалять.

Создание новых узлов

На статичном сайте элементы добавляются на страницу с помощью написания HTML кода в .html файле. В динамическом веб-приложении элементы и текст зачастую вставляются через JS. Для создания новых узлов в Dom используются методы createElement() и createTextNode().

createElement() — Создает новый узел элемента

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

createTextNode() — Создает новый текстовый узел

node.textContent — Получает или устанавливает контент узла элемента

node.innerHTML — Получает или устанавливает HTML контент элемента

Для начала создадим файл index.html и сохраним его в новой папке проекта.

Кликните в любом месте страницы правой кнопкой мыши – инспектировать элемент, чтобы открыть панель разработчика. Перейдите на вкладку Console.

Создадим тег p с помощью метода createElement() на объекте document.

Мы создали новый тег p, который можно вывести в консоль.

В переменной paragraph записан пустой тег p, без текста он бесполезен. Вставим в него текст через свойство textContent.

Комбинация createElement() и textContent дает нам завершенный узел элемента.

Есть другой способ установки контента элемента – через свойство innerHTML. С его помощью можно вставлять HTML вместе с текстом в элемент.

Обратите внимание: Этот метод работает и часто используется для вставки контента в элемент, но в нем кроется XSS уязвимость, связанная с тем, что в HTML можно встроить JS код. Поэтому рекомендуется использовать textContent, который удаляет теги.

Текстовый узел можно создать через метод createTextNode().

С помощью этих методов мы создали новые элементы и текстовые узлы, но они не отображаются на front end сайта, пока мы не вставим их в документ.

Вставка узлов в DOM

Чтобы увидеть новые текстовые узлы и элементы на front end, необходимо вставить их в document. Для добавления элементов в начало, середину и конец родительского элемента используются методы appendChild() и insertBefore(), а с помощью метода replaceChild() можно заменить старый узел новым.

node.appendChild() — Вставляет узел последним среди дочерних элементов родителя

node.insertBefore() — Вставлять узел в родительский элемент перед определенным смежным узлом

node.replaceChild() — Заменяет существующий узел на новый

Попрактикуемся с этими методами, давайте создадим список дел в HTML:

Страница в браузере выглядит следующим образом:

Как вносить изменения в DOM

Чтобы добавить новый элемент в конец списка, нам необходимо создать элемент и сначала вставить в него текст, как мы делали в разделе «создание новых узлов».

Мы получили готовый элемент для списка, теперь его можно вставить в конец списка с помощью appendChild().

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

В конец ul вставился элемент li.

Как вносить изменения в DOM

Может быть, у нас есть более приоритетные задачи, и нам необходимо добавить их в начало списка. Нам нужно создать еще один элемент, так как createElement() создает лишь один элемент и не используется повторно.

В начало списка тег можно вставить с помощью insertBefore(). Этот метод принимает два аргумента – первый это новый дочерний узел, второй – смежный узел, который будет следовать после вставляемого. Что-то вроде этого:

В нашем примере мы добавим новый элемент anotherTodo перед первым элементом списка, который на данный момент «Buy groceries».

Как вносить изменения в DOM

Новый узел успешно добавлен в начало списка. Теперь мы умеем добавлять узел к родительскому элементу. Теперь необходимо научиться заменять существующий узел на новый.

Чтобы продемонстрировать замену, мы изменим существующий элемент списка. Сперва создадим новый элемент, все по-старому.

Как и insertBefore(), replaceChild() принимает 2 аргумент: новый узел и узел, который нужно заменить, как показано ниже.

Мы заменим третий дочерний элемент списка:

Как вносить изменения в DOM

Комбинация appendChild(), insertBefore() и replaceChild() позволяет вставлять узлы и элементы в любое место DOM.

Удаление узлов из DOM

Мы умеем создавать элементы, добавлять их в DOM, изменять существующие элементы. Осталось научиться удалять существующие элементы из DOM. Дочерние узлы можно удалить из родителя с помощью removeChild(), а сам узел можно удалить с помощью remove().

node.removeChild() — Удаляет дочерний узел

node.remove() — Удаляет узел

В примере со списком нам необходимо удалять элементы, как только задача выполнена. Если вы сделали домашнюю работу, вы можете удалить Do homework из списка. А это последний элемент списка, и удалить его можно через removeChild().

Как вносить изменения в DOM

Должен быть метод на простое удаление узла — remove() используется напрямую на узле.

Как вносить изменения в DOM

Между removeChild() и remove() можно удалить любой узел из DOM. Есть еще один способ удалить дочерний элемент из DOM – установить свойство innerHTML родителя в пустую строку «». Этот метод не рекомендуется использовать, так как он менее ясный, но он может встречаться.

Заключение

В этом уроке мы научились использовать JS для создания новых узлов и элементов, вставки их в DOM, замены и удаления существующих элементов и узлов.

На данный момент в серии уроков по DOM вы уже знаете, как получить доступ к элементу в DOM, перемещаться по любым узлам в DOM, а также как изменять DOM. Теперь вы можете уверенно создавать базовые front end приложения с помощью JS.

Автор: Tania Rascia

Источник: https://www.tutorialspoint.com/

Редакция: Команда webformyself.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Курс по JavaScript: основы

Изучите JavaScript с нуля до результата!

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree