От автора: в предыдущих двух частях курса о DOM мы узнали, как получать доступ к элементам в DOM, а также как перемещаться по DOM. С помощью этого разработчик можно использовать классы, теги, id, селекторы для поиска любого узла в DOM, а также использовать родительские, дочерние и смежные свойства для поиска родительских узлов.
Чтобы повысить свой уровень владения, необходимо научиться добавлять, заменять и удалять узлы — в общем, делать какое-либо изменение DOM. Приложение список дел – один из примеров JS программы, в которой понадобится создавать, изменять и удалять элементы из DOM.
В этом уроке мы узнаем, как создавать новые узлы и вставлять их в DOM, заменять существующие узлы, а также как их удалять.
Создание новых узлов
На статичном сайте элементы добавляются на страницу с помощью написания HTML кода в .html файле. В динамическом веб-приложении элементы и текст зачастую вставляются через JS. Для создания новых узлов в Dom используются методы createElement() и createTextNode().
createElement() — Создает новый узел элемента
createTextNode() — Создает новый текстовый узел
node.textContent — Получает или устанавливает контент узла элемента
node.innerHTML — Получает или устанавливает HTML контент элемента
Для начала создадим файл index.html и сохраним его в новой папке проекта.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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.
|
1 |
const paragraph = document.createElement('p'); |
Мы создали новый тег p, который можно вывести в консоль.
|
1 |
console.log(paragraph) |
|
1 |
<p></p> |
В переменной paragraph записан пустой тег p, без текста он бесполезен. Вставим в него текст через свойство textContent.
|
1 2 |
paragraph.textContent = "I'm a brand new paragraph."; console.log(paragraph) |
|
1 |
<p>I'm a brand new paragraph.</p> |
Комбинация createElement() и textContent дает нам завершенный узел элемента.
Есть другой способ установки контента элемента – через свойство innerHTML. С его помощью можно вставлять HTML вместе с текстом в элемент.
|
1 |
paragraph.innerHTML = "I'm a paragraph with <strong>bold</strong> text."; |
Обратите внимание: Этот метод работает и часто используется для вставки контента в элемент, но в нем кроется XSS уязвимость, связанная с тем, что в HTML можно встроить JS код. Поэтому рекомендуется использовать textContent, который удаляет теги.
Текстовый узел можно создать через метод createTextNode().
|
1 2 |
const text = document.createTextNode("I'm a new text node."); console.log(text) |
|
1 |
"I'm a new text node." |
С помощью этих методов мы создали новые элементы и текстовые узлы, но они не отображаются на front end сайта, пока мы не вставим их в документ.
Вставка узлов в DOM
Чтобы увидеть новые текстовые узлы и элементы на front end, необходимо вставить их в document. Для добавления элементов в начало, середину и конец родительского элемента используются методы appendChild() и insertBefore(), а с помощью метода replaceChild() можно заменить старый узел новым.
node.appendChild() — Вставляет узел последним среди дочерних элементов родителя
node.insertBefore() — Вставлять узел в родительский элемент перед определенным смежным узлом
node.replaceChild() — Заменяет существующий узел на новый
Попрактикуемся с этими методами, давайте создадим список дел в HTML:
|
1 2 3 4 5 6 |
todo.html <ul> <li>Buy groceries</li> <li>Feed the cat</li> <li>Do laundry</li> </ul> |
Страница в браузере выглядит следующим образом:
Чтобы добавить новый элемент в конец списка, нам необходимо создать элемент и сначала вставить в него текст, как мы делали в разделе «создание новых узлов».
|
1 2 3 4 5 6 |
// To-do list ul element const todoList = document.querySelector('ul'); // Create new to-do const newTodo = document.createElement('li'); newTodo.textContent = 'Do homework'; |
Мы получили готовый элемент для списка, теперь его можно вставить в конец списка с помощью appendChild().
|
1 2 |
// Add new todo to the end of the list todoList.appendChild(newTodo); |
В конец ul вставился элемент li.
|
1 2 3 4 5 6 7 |
todo.html <ul> <li>Buy groceries</li> <li>Feed the cat</li> <li>Do laundry</li> <li>Do homework</li> </ul> |
Может быть, у нас есть более приоритетные задачи, и нам необходимо добавить их в начало списка. Нам нужно создать еще один элемент, так как createElement() создает лишь один элемент и не используется повторно.
|
1 2 3 |
// Create new to-do const anotherTodo = document.createElement('li'); anotherTodo.textContent = 'Pay bills'; |
В начало списка тег можно вставить с помощью insertBefore(). Этот метод принимает два аргумента – первый это новый дочерний узел, второй – смежный узел, который будет следовать после вставляемого. Что-то вроде этого:
|
1 |
parentNode.insertBefore(newNode, nextSibling); |
В нашем примере мы добавим новый элемент anotherTodo перед первым элементом списка, который на данный момент «Buy groceries».
|
1 2 |
// Add new to-do to the beginning of the list todoList.insertBefore(anotherTodo, todoList.firstElementChild); |
|
1 2 3 4 5 6 7 8 |
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> |
Новый узел успешно добавлен в начало списка. Теперь мы умеем добавлять узел к родительскому элементу. Теперь необходимо научиться заменять существующий узел на новый.
Чтобы продемонстрировать замену, мы изменим существующий элемент списка. Сперва создадим новый элемент, все по-старому.
|
1 2 |
const modifiedTodo = document.createElement('li'); modifiedTodo.textContent = 'Feed the dog'; |
Как и insertBefore(), replaceChild() принимает 2 аргумент: новый узел и узел, который нужно заменить, как показано ниже.
|
1 |
parentNode.replaceChild(newNode, oldNode); |
Мы заменим третий дочерний элемент списка:
|
1 2 |
// Replace existing to-do with modified to-do todoList.replaceChild(modifiedTodo, todoList.children[2]); |
|
1 2 3 4 5 6 7 8 |
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> |
Комбинация appendChild(), insertBefore() и replaceChild() позволяет вставлять узлы и элементы в любое место DOM.
Удаление узлов из DOM
Мы умеем создавать элементы, добавлять их в DOM, изменять существующие элементы. Осталось научиться удалять существующие элементы из DOM. Дочерние узлы можно удалить из родителя с помощью removeChild(), а сам узел можно удалить с помощью remove().
node.removeChild() — Удаляет дочерний узел
node.remove() — Удаляет узел
В примере со списком нам необходимо удалять элементы, как только задача выполнена. Если вы сделали домашнюю работу, вы можете удалить Do homework из списка. А это последний элемент списка, и удалить его можно через removeChild().
|
1 |
todoList.removeChild(todoList.lastElementChild); |
|
1 2 3 4 5 6 7 |
todo.html <ul> <li>Pay bills</li> <li>Buy groceries</li> <li>Feed the dog</li> <li>Do laundry</li> </ul> |
Должен быть метод на простое удаление узла — remove() используется напрямую на узле.
|
1 2 |
// Remove second element child from todoList todoList.children[1].remove(); |
|
1 2 3 4 5 6 |
todo.html <ul> <li>Pay bills</li> <li>Feed the dog</li> <li>Do laundry</li> </ul> |
Между removeChild() и remove() можно удалить любой узел из DOM. Есть еще один способ удалить дочерний элемент из DOM – установить свойство innerHTML родителя в пустую строку «». Этот метод не рекомендуется использовать, так как он менее ясный, но он может встречаться.
Заключение
В этом уроке мы научились использовать JS для создания новых узлов и элементов, вставки их в DOM, замены и удаления существующих элементов и узлов.
На данный момент в серии уроков по DOM вы уже знаете, как получить доступ к элементу в DOM, перемещаться по любым узлам в DOM, а также как изменять DOM. Теперь вы можете уверенно создавать базовые front end приложения с помощью JS.
Автор: Tania Rascia
Источник: //www.tutorialspoint.com/
Редакция: Команда webformyself.
