Изменение страницы с помощью DOM

8 февраля, 2018 11:38 дп 1 173 views | 1 комментарий

| | 1 Comment

Читайте также:

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

Теперь нужно научиться добавлять, изменять, заменять и удалять узлы. Для этого в мануале будет использоваться простое приложение для создания списков дел.

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

Создание нового узла

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

Свойство/Метод Описание
createElement() Создает новый узел элемента.
createTextNode() Создает текстовый узел.
node.textContent Извлекает или задает текстовое содержимое элемента.
node.innerHTML Извлекает или задает HTML-содержимое элемента.

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

<!DOCTYPE html>
<html lang="en">
<head>
<title>Learning the DOM</title>
</head>
<body>
<h1>Document Object Model</h1>
</body>
</html>

Кликните правой кнопкой по странице и выберите Inspect, затем Developer Tools. Перейдите в консоль.

Читайте также: Использование консоли разработчика JavaScript

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

const paragraph = document.createElement('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), поскольку позволяет добавлять встроенный JavaScript. Поэтому вместо innerHTML рекомендуется использовать textContent, который будет вытеснять HTML-теги.

Текстовый узел можно создать с помощью createTextNode():

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

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

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

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

Свойство/Метод Описание
node.appendChild() Добавляет узел в качестве последнего дочернего элемента родительского элемента.
node.insertBefore() Вставляет узел в родительский элемент перед указанным соседним узлом.
node.replaceChild() Заменяет существующий узел новым узлом.

Чтобы потренироваться работать с этими методами, создайте список дел в HTML:

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

Попробуйте открыть его в браузере.

  • Buy groceries
  • Feed the cat
  • Do laundry

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

// 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.

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

Предположим, что у вас есть задача с более высоким приоритетом, и вы хотите добавить ее в начало списка. Для этого нужно создать еще один элемент, поскольку метод 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);
<ul>
<li>Pay bills</li>
<li>Buy groceries</li>
<li>Feed the cat</li>
<li>Do laundry</li>
<li>Do homework</li>
</ul>

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

Для начала нужно снова создать новый элемент:

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]);
<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().

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

Чтобы удалить узел, используйте метод remove():

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

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

Заключение

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

Tags:

1 комментарий

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