CRUD-операции в DOM

Document Object Model (DOM) — это то, как браузеры представляют HTML. Он превращает каждый элемент, атрибут и фрагмент текста в объект. JavaScript использует эти объекты, чтобы изменять то, что вы видите на экране.

Когда вы нажимаете на кнопку, и страница обновляется без перезагрузки, это JavaScript изменяет DOM.

С помощью этих методов вы можете выполнять CRUD-операции (Create — создание, Read — чтение, Update — обновление, Delete — удаление).

1. Доступ к элементам (Read)

Чтобы что-то изменить, нужно сначала это найти. Используйте следующие методы:

• getElementById()
• getElementsByClassName()
• getElementsByTagName()
• querySelector()
• querySelectorAll()

2. Создание элементов (Create)

Вы можете генерировать новые HTML-элементы с помощью JavaScript.

• createElement("tagName") создает элемент в памяти.
• append() добавляет содержимое в конец родительского элемента.
• appendChild() добавляет один узел в качестве последнего дочернего элемента.
• prepend() добавляет содержимое в начало родительского элемента.
• before() вставляет элемент перед определенным объектом.
• after() вставляет элемент после определенного объекта.
• insertBefore() помещает элемент перед определенным дочерним элементом.

Примечание: Элемент остается в памяти до тех пор, пока вы не добавите его на страницу.

3. Обновление элементов (Update)

Вы можете изменять существующий контент с помощью следующих свойств:

• innerText: изменяет только видимый текст.
• textContent: изменяет весь текст, включая скрытый.
• innerHTML: изменяет содержимое и позволяет добавлять HTML-теги.

4. Работа с атрибутами (Update)

Атрибуты предоставляют дополнительную информацию об элементах.

• setAttribute(name, value): устанавливает или заменяет атрибут.
• getAttribute(name): получает значение атрибута.
• removeAttribute(name): удаляет атрибут.
• hasAttribute(name): проверяет наличие атрибута.

Совет: Используйте classList.add(), чтобы добавить класс, не удаляя старые. setAttribute() заменяет все значение целиком.

5. Удаление элементов (Delete)

Чтобы удалить элемент со страницы, используйте:

• remove()

Итог CRUD-процесса:

• Create: createElement()
• Update: innerText = "New text"
• Add: appendChild()
• Delete: remove()

Освоение этих методов позволит вам создавать интерактивные приложения, такие как списки дел или калькуляторы. Это важнейший навык для фронтенд-разработки.

Источник: https://dev.to/madhanraj/document-object-model-dom-crud-operations-9ka