Это часть 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.
Чао…