Это часть 2 серии статей о манипуляциях с DOM.
Щелкните здесь, чтобы прочитать первую часть (очень рекомендуется).

До сих пор мы рассмотрели все теоретические аспекты, связанные с DOM. Пришло время приступить к его практической реализации.

Концепция манипуляции с DOM может быть разбита на CRUD, чтобы сделать ее более понятной.

CRUD означает создание, чтение, обновление и удаление. В отношении DOM это означает:
1. Создание узлов DOM
2. Чтение узлов DOM
3. Обновление узлов DOM
4. Удаление узлов DOM

Примечание. Реализация выполняется на VanillaJS (т. е. на чистом JS), а не на jQuery.

Начнем с самого простого - чтения узлов DOM.

Чтение узлов DOM

Есть много способов чтения / доступа к узлам DOM. Некоторые из наиболее важных из них:

querySelector

Метод querySelector () (объекта документа) возвращает первый элемент, который соответствует указанным селекторам CSS в документе.

Syntax: document.querySelector(‘<CSS Selector>’);

Важно: Щелкните здесь, чтобы получить доступ к списку различных селекторов CSS.

querySelectorAll

Метод querySelectorAll () (объекта документа) возвращает все элементы, которые соответствуют указанным селекторам CSS в документе.

Syntax: document.querySelectorAll(‘<CSS Selector>’);

Обновление узлов DOM

Каждый узел в модели DOM имеет набор свойств и методов, связанных с ним.

Эти свойства и методы используются для обновления соответствующих узлов DOM.

Например:
Чтобы изменить узел текст конкретного узла элемента, используется свойство innerText узла элемента.

Syntax: elementNode.innerText = 'Modified Text';

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

Чтобы удалить конкретный узел DOM (в VanillaJS), мы должны сначала получить доступ к его родительскому узлу, а оттуда удалить дочерний.

Syntax: elementNode.parentNode.removeChild(elementNode);

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

Различные типы узлов DOM создаются с использованием разного синтаксиса.

//creating a new element node
Syntax: document.createElement('<HTML element>');
//creating a new text node
Syntax: document.createTextNode('New text content');

Бонус: добавление элементов в DOM

Узлы, созданные с помощью JavaScript, также необходимо добавить в DOM, иначе создание узла бесполезно.

Добавление узла в DOM делает его видимым в браузере.

Недавно созданный узел добавляется к существующему узлу. Это делается с помощью appendChild ().

appendChild

Syntax: elementNode.appendChild(elementNode);

Пример 1:

Пример 2:

На этом завершается часть 2 манипуляции с DOM.

Чао…