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

Вступление

В предыдущих двух статьях серии « Понимание серии DOM » мы узнали, как получить доступ к элементам в DOM и как пройти DOM . Используя эти знания, разработчик может использовать классы, теги, идентификаторы и селектора для поиска любого узла в DOM и использовать родительские, дочерние и дочерние свойства для поиска относительных узлов.

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

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

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

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

Свойство / Метод Описание
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>

Щелкните правой кнопкой мыши в любом месте страницы и выберите «Осмотреть», чтобы открыть Инструменты разработчика, затем перейдите к консоли .

Мы будем использовать createElement()на documentобъекте , чтобы создать новый pэлемент.

  • const paragraph = document.createElement(‘p’);

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

  • console.log(paragraph)

Output

<p></p>

paragraphПеременная выводит пустой 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.»;

Примечание.

Хотя это будет работать и является распространенным методом добавления контента к элементу, существует риск межсайтового сценария (XSS), связанный с использованием innerHTMLметода, поскольку встроенный JavaScript может быть добавлен к элементу. Поэтому рекомендуется использовать textContentвместо этого, который будет выделять HTML-теги.

Также возможно создать текстовый узел с помощью 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()используются для замены старого узла новым узлом.

Свойство / Метод Описание
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 Скриншот 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>

DOM Скриншот 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>

Скриншот 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>

DOM Скриншот 4

С комбинацией 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 Скриншот 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>

Скриншот 6

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

Заключение

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

На этом этапе в разделе « Понимание серии DOM» вы знаете, как получить доступ к любому элементу в DOM, пройти через любой узел в DOM и изменить сам DOM. Теперь вы можете быть уверены в создании базовых интерфейсных веб-приложений с помощью JavaScript.

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

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