Операции CRUD в DOM

Document Object Model (DOM) — это древовидная структура вашего HTML. JavaScript использует её для доступа к каждому элементу, атрибуту и текстовому фрагменту на странице, а также для их изменения.

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

Вот как выполняются операции CRUD (Create — создание, Read — чтение, Update — обновление, Delete — удаление).

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

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

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

2. Create: Создание новых элементов

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

  • createElement(): Создает новый тег в памяти.
  • append(): Добавляет содержимое в конец родительского элемента.
  • appendChild(): Добавляет один узел в качестве последнего дочернего элемента.
  • prepend(): Добавляет содержимое в начало родительского элемента.
  • before(): Вставляет элемент перед указанной целью.
  • after(): Вставляет элемент после указанной цели.
  • insertBefore(): Размещает новый элемент перед существующим дочерним элементом.

3. Update: Изменение содержимого

Изменяйте то, что пользователи видят на экране:

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

4. Attributes: Управление свойствами

Атрибуты добавляют дополнительную информацию к вашим тегам.

  • setAttribute(): Устанавливает новое значение атрибута. Обратите внимание, что это заменяет старое значение.
  • getAttribute(): Получает текущее значение.
  • removeAttribute(): Удаляет атрибут.
  • hasAttribute(): Проверяет, существует ли атрибут.

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

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

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

  • remove()

Краткий обзор цикла CRUD:

  • Create: document.createElement("p")
  • Update: p.innerText = "Hello"
  • Read: document.getElementById("p")
  • Delete: p.remove()

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

Source: https://dev.to/madhanraj/document-object-model-dom-crud-operations-9ka

Optional learning community: https://t.me/GyaanSetuAi