Как вносить изменения в 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 и сохраним его в новой папке проекта.

index.html
<!DOCTYPE html>
<html lang="en">

  <head>
 <title>Learning the DOM</title>
  </head>

  <body>
 <h1>Document Object Model</h1>
  </body>

</html>

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

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

const paragraph = document.createElement('p');

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

console.log(paragraph)
<p></p>

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

 paragraph.textContent = "I'm a brand new paragraph.";
 console.log(paragraph) 
<p>I'm a brand new paragraph.</p>

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

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

paragraph.innerHTML = "I'm a paragraph with <strong>bold</strong> text.";

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

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

 const text = document.createTextNode("I'm a new text node.");
 console.log(text) 
"I'm a new text node."

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

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

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

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

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

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

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

todo.html
<ul>
  <li>Buy groceries</li>
  <li>Feed the cat</li>
  <li>Do laundry</li>
</ul>

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

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

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

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

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

Узнать подробнее
 // To-do list ul element
 const todoList = document.querySelector('ul');

 // Create new to-do
 const newTodo = document.createElement('li');
 newTodo.textContent = 'Do homework'; 

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

 // Add new todo to the end of the list
 todoList.appendChild(newTodo); 

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

todo.html
<ul>
  <li>Buy groceries</li>
  <li>Feed the cat</li>
  <li>Do laundry</li>
  <li>Do homework</li>
</ul>

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

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

 // Create new to-do
 const anotherTodo = document.createElement('li');
 anotherTodo.textContent = 'Pay bills'; 

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

parentNode.insertBefore(newNode, nextSibling);

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

 // Add new to-do to the beginning of the list
 todoList.insertBefore(anotherTodo, todoList.firstElementChild); 
todo.html
<ul>
  <li>Pay bills</li>
  <li>Buy groceries</li>
  <li>Feed the cat</li>
  <li>Do laundry</li>
  <li>Do homework</li>
</ul>

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

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

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

 const modifiedTodo = document.createElement('li');
 modifiedTodo.textContent = 'Feed the dog'; 

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

parentNode.replaceChild(newNode, oldNode);

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

 // Replace existing to-do with modified to-do
 todoList.replaceChild(modifiedTodo, todoList.children[2]); 
do.html
<ul>
  <li>Pay bills</li>
  <li>Buy groceries</li>
  <li>Feed the dog</li>
  <li>Do laundry</li>
  <li>Do homework</li>
</ul>

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

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

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

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

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

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

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

todoList.removeChild(todoList.lastElementChild);
todo.html
<ul>
  <li>Pay bills</li>
  <li>Buy groceries</li>
  <li>Feed the dog</li>
  <li>Do laundry</li>
</ul>

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

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

 // Remove second element child from todoList
 todoList.children[1].remove(); 
todo.html
<ul>
  <li>Pay bills</li>
  <li>Feed the dog</li>
  <li>Do laundry</li>
</ul>

Как вносить изменения в 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> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree