Operações CRUD no DOM

O Document Object Model (DOM) é a forma como os navegadores representam o HTML. Ele transforma cada elemento, atributo e trecho de texto em um objeto. O JavaScript utiliza esses objetos para alterar o que você vê na tela.

Quando você clica em um botão e uma página é atualizada sem recarregar, o JavaScript está alterando o DOM.

Você pode realizar operações CRUD (Create, Read, Update, Delete — Criar, Ler, Atualizar, Deletar) com estes métodos.

  1. Acessando Elementos (Read) Para alterar algo, você deve primeiro encontrá-lo. Use estes métodos:
  • getElementById()
  • getElementsByClassName()
  • getElementsByTagName()
  • querySelector()
  • querySelectorAll()
  1. Criando Elementos (Create) Você pode gerar novos elementos HTML usando JavaScript.
  • createElement("tagName") cria o elemento na memória.
  • append() adiciona conteúdo ao final de um elemento pai.
  • appendChild() adiciona um único nó como o último filho.
  • prepend() adiciona conteúdo ao início de um elemento pai.
  • before() insere um elemento antes de um item específico.
  • after() insere um elemento depois de um item específico.
  • insertBefore() coloca um elemento antes de um filho específico.

Nota: Um elemento permanece na memória até que você o adicione à página.

  1. Atualizando Elementos (Update) Você pode alterar o conteúdo existente usando estas propriedades:
  • innerText: Altera apenas o texto visível.
  • textContent: Altera todo o texto, incluindo o texto oculto.
  • innerHTML: Altera o conteúdo e permite adicionar tags HTML.
  1. Trabalhando com Atributos (Update) Atributos fornecem informações extras sobre os elementos.
  • setAttribute(name, value): Define ou substitui um atributo.
  • getAttribute(name): Recupera o valor de um atributo.
  • removeAttribute(name): Deleta um atributo.
  • hasAttribute(name): Verifica se um atributo existe.

Dica profissional: Use classList.add() para adicionar uma classe sem remover as antigas. O setAttribute() substitui o valor inteiro.

  1. Removendo Elementos (Delete) Para deletar um elemento da página, use:
  • remove()

Resumo de um fluxo CRUD:

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

Dominar esses métodos permite que você construa aplicativos interativos, como listas de tarefas ou calculadoras. Esta é uma habilidade vital para o desenvolvimento front-end.

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