Вступление
В двух предыдущих статьях серии Understanding DOM мы изучили https://www.digitalocean.com / community / tutorials / how-to-access-elements-in-dom [Как получить доступ к элементам в DOM] и https://www.digitalocean.com/community/tutorials/how-to-traverse-the- [Как пройти DOM]. Используя эти знания, разработчик может использовать классы, теги, идентификаторы и селекторы, чтобы найти любой узел в DOM, и использовать свойства parent, child и sibling, чтобы найти относительные узлы.
Следующим шагом для более полного освоения DOM является изучение того, как добавлять, изменять, заменять и удалять узлы. Приложение со списком дел - это один из практических примеров программы на JavaScript, в которой вам необходимо иметь возможность создавать, изменять и удалять элементы в DOM.
В этом руководстве мы рассмотрим, как создавать новые узлы и вставлять их в DOM, заменять существующие узлы и удалять узлы.
Создание новых узлов
На статическом веб-сайте элементы добавляются на страницу путем непосредственного написания HTML в файле + .html +. В динамическом веб-приложении элементы и текст часто добавляются с помощью JavaScript. Методы + createElement () + и + createTextNode () + используются для создания новых узлов в DOM.
| Property/Method | Description |
|---|---|
Create a new element node |
|
Create a new text node |
|
Get or set the text content of an element node |
|
Get or set the HTML content of an element |
Для начала давайте создадим файл + index.html и сохраним его в новом каталоге проекта.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Learning the DOM</title>
</head>
<body>
<h1>Document Object Model</h1>
</body>
</html>Щелкните правой кнопкой мыши в любом месте страницы и выберите «Осмотреть», чтобы открыть Инструменты разработчика, затем перейдите к * https: //www.digitalocean.com/community/tutorials/how-to-use-the-javascript-developer-console [ Приставка]*.
Мы будем использовать + createElement () + для объекта + document для создания нового элемента` + p + `.
const paragraph = document.createElement('p');Мы создали новый элемент + p +, который мы можем проверить в Console.
console.log(paragraph)Output<p></p>Переменная + parase + выводит пустой элемент + p +, который не очень полезен без какого-либо текста. Чтобы добавить текст к элементу, мы установим свойство + textContent +.
paragraph.textContent = "I'm a brand new paragraph.";
console.log(paragraph)Output<p>I'm a brand new paragraph.</p>Комбинация + createElement () + и + textContent + создает полный элементный узел.
Альтернативный метод установки содержимого элемента - свойство + innerHTML +, которое позволяет добавлять HTML и текст к элементу.
paragraph.innerHTML = "I'm a paragraph with <strong>bold</strong> text.";Также можно создать текстовый узел с помощью метода + createTextNode () +.
const text = document.createTextNode("I'm a new text node.");
console.log(text)Output"I'm a new text node."С помощью этих методов мы создали новые элементы и текстовые узлы, но они не отображаются в интерфейсе веб-сайта до тех пор, пока они не будут вставлены в документ.
Вставка узлов в DOM
Чтобы увидеть новые текстовые узлы и элементы, которые мы создаем на внешнем интерфейсе, нам нужно вставить их в + document +. Методы + appendChild () + и + insertBefore () + используются для добавления элементов в начало, середину или конец родительского элемента, а + replaceChild () + используется для замены старого узла с новым узлом.
| Property/Method | Description |
|---|---|
Add a node as the last child of a parent element |
|
Insert a node into the parent element before a specified sibling node |
|
Replace an existing node with a new node |
Чтобы попрактиковаться в этих методах, давайте создадим список дел в HTML:
todo.html
<ul>
<li>Buy groceries</li>
<li>Feed the cat</li>
<li>Do laundry</li>
</ul>Когда вы загрузите свою страницу в браузере, она будет выглядеть так:
изображение: https: //assets.digitalocean.com/articles/eng_javascript/dom/to-do-1.png [DOM Screenshot 1]
Чтобы добавить новый элемент в конец списка дел, нам нужно создать элемент и сначала добавить к нему текст, как мы делали в разделе «Создание новых узлов» выше.
// 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);Вы можете видеть, что новый элемент + li + был добавлен в конец + ul +.
todo.html
<ul>
<li>Buy groceries</li>
<li>Feed the cat</li>
<li>Do laundry</li>
<li>Do homework</li>
</ul>изображение: https: //assets.digitalocean.com/articles/eng_javascript/dom/to-do-2.png [DOM Screenshot 2]
Возможно, у нас есть задача с более высоким приоритетом, и мы хотим добавить ее в начало списка. Нам нужно создать еще один элемент, так как + 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>изображение: https: //assets.digitalocean.com/articles/eng_javascript/dom/to-do-3.png [DOM Screenshot 3]
Новый узел был успешно добавлен в начале списка. Теперь мы знаем, как добавить узел к родительскому элементу. Следующее, что мы можем захотеть сделать, это заменить существующий узел новым узлом.
Мы изменим существующее задание, чтобы продемонстрировать, как заменить узел. Первый шаг создания нового элемента остается прежним.
const modifiedTodo = document.createElement('li');
modifiedTodo.textContent = 'Feed the dog';Как + insertBefore () +, + replaceChild () + принимает два аргумента - новый узел и заменяемый узел, как показано в псевдокоде ниже.
parentNode.replaceChild(newNode, oldNode);Мы заменим третий дочерний элемент списка измененным заданием.
// Replace existing to-do with modified to-do
todoList.replaceChild(modifiedTodo, todoList.children[2]);todo.html
<ul>
<li>Pay bills</li>
<li>Buy groceries</li>
<li>Feed the dog</li>
<li>Do laundry</li>
<li>Do homework</li>
</ul>изображение: https: //assets.digitalocean.com/articles/eng_javascript/dom/to-do-4.png [DOM Screenshot 4]
Используя комбинацию + appendChild () +, + insertBefore () + и + replaceChild () +, вы можете вставлять узлы и элементы в любом месте DOM.
Удаление узлов из DOM
Теперь мы знаем, как создавать элементы, добавлять их в DOM и изменять существующие элементы. Последний шаг - научиться удалять существующие узлы из DOM. Дочерние узлы можно удалить из родителя с помощью + removeChild () +, а сам узел можно удалить с помощью + remove () +.
| Method | Description |
|---|---|
Remove child node |
|
Remove node |
Используя приведенный выше пример с делами, мы хотим удалить элементы после их завершения. Если вы завершили домашнее задание, вы можете удалить элемент + 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>изображение: https: //assets.digitalocean.com/articles/eng_javascript/dom/to-do-5.png [DOM Screenshot 5]
Другим методом может быть удаление самого узла, используя метод + 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>изображение: https: //assets.digitalocean.com/articles/eng_javascript/dom/to-do-6.png [DOM Screenshot 6]
Между + removeChild () + и + remove () + вы можете удалить любой узел из DOM. Другой способ удаления дочерних элементов из DOM, который вы можете увидеть, - установка свойства + innerHTML + родительского элемента в пустую строку (" "). Это не предпочтительный метод, потому что он менее явный, но вы можете увидеть его в существующем коде.
Заключение
В этом руководстве мы узнали, как использовать JavaScript для создания новых узлов и элементов и вставки их в DOM, а также замены и удаления существующих узлов и элементов.
На этом этапе в Understanding DOM series вы знаете, как получить доступ к любому элементу в DOM, пройтись по любому узел в DOM и измените сам DOM. Теперь вы можете быть уверены в создании базовых интерфейсных веб-приложений с помощью JavaScript.