Operações CRUD no DOM

O Document Object Model (DOM) é uma estrutura de árvore para o seu HTML. O JavaScript o utiliza para acessar e alterar cada elemento, atributo e trecho de texto em uma página.

Quando você clica em um botão e a página é atualizada sem um recarregamento, você vê a manipulação do DOM em ação.

Veja como realizar operações CRUD (Create, Read, Update, Delete).

  1. Read: Acessando Elementos Use estes métodos para encontrar elementos em sua página:
  • getElementById()
  • getElementsByClassName()
  • getElementsByTagName()
  • querySelector()
  • querySelectorAll()
  1. Create: Criando Novos Elementos Você pode gerar novos elementos HTML usando JavaScript.
  • createElement(): Cria uma nova tag 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 alvo específico.
  • after(): Insere um elemento após um alvo específico.
  • insertBefore(): Coloca um novo elemento antes de um filho existente.
  1. Update: Alterando Conteúdo Modifique o que os usuários veem na tela:
  • innerText: Atualiza apenas o texto visível.
  • textContent: Atualiza todo o texto, incluindo o texto oculto.
  • innerHTML: Atualiza o conteúdo e permite adicionar tags HTML.
  1. Attributes: Gerenciando Propriedades Atributos adicionam informações extras às suas tags.
  • setAttribute(): Define um novo valor para um atributo. Note que isso substitui o valor antigo.
  • getAttribute(): Obtém o valor atual.
  • removeAttribute(): Exclui um atributo.
  • hasAttribute(): Verifica se um atributo existe.

Dica profissional: Use classList.add() para adicionar uma classe sem excluir as atuais. Use setAttribute() para atributos personalizados.

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

Resumo do Fluxo CRUD:

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

Dominar esses métodos permite que você construa ferramentas interativas como listas de tarefas, calculadoras e validadores de formulários. É um passo vital para aprender frameworks web modernos.

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

Comunidade de aprendizado opcional: https://t.me/GyaanSetuAi