Operaciones CRUD del DOM

El Modelo de Objetos del Documento (DOM) es una estructura de árbol para tu HTML. JavaScript lo utiliza para acceder y cambiar cada elemento, atributo y fragmento de texto en una página.

Cuando haces clic en un botón y la página se actualiza sin recargarse, estás viendo la manipulación del DOM en acción.

Aquí te explicamos cómo realizar las operaciones CRUD (Crear, Leer, Actualizar, Eliminar).

  1. Leer: Acceder a los elementos Utiliza estos métodos para encontrar elementos en tu página:
  • getElementById()
  • getElementsByClassName()
  • getElementsByTagName()
  • querySelector()
  • querySelectorAll()
  1. Crear: Crear nuevos elementos Puedes generar nuevos elementos HTML usando JavaScript.
  • createElement(): Crea una nueva etiqueta en memoria.
  • append(): Añade contenido al final de un elemento padre.
  • appendChild(): Añade un único nodo como el último hijo.
  • prepend(): Añade contenido al inicio de un elemento padre.
  • before(): Inserta un elemento antes de un objetivo específico.
  • after(): Inserta un elemento después de un objetivo específico.
  • insertBefore(): Coloca un nuevo elemento antes de un hijo existente.
  1. Actualizar: Cambiar el contenido Modifica lo que los usuarios ven en la pantalla:
  • innerText: Actualiza solo el texto visible.
  • textContent: Actualiza todo el texto, incluido el texto oculto.
  • innerHTML: Actualiza el contenido y te permite añadir etiquetas HTML.
  1. Atributos: Gestionar propiedades Los atributos añaden información adicional a tus etiquetas.
  • setAttribute(): Establece un nuevo valor para un atributo. Ten en cuenta que esto reemplaza el valor anterior.
  • getAttribute(): Obtiene el valor actual.
  • removeAttribute(): Elimina un atributo.
  • hasAttribute(): Comprueba si existe un atributo.

Consejo profesional: Usa classList.add() para añadir una clase sin eliminar las actuales. Usa setAttribute() para atributos personalizados.

  1. Eliminar: Quitar elementos Para eliminar un elemento de la página, usa:
  • remove()

Resumen del flujo CRUD:

  • Crear: document.createElement("p")
  • Actualizar: p.innerText = "Hello"
  • Leer: document.getElementById("p")
  • Eliminar: p.remove()

Dominar estos métodos te permite construir herramientas interactivas como listas de tareas, calculadoras y validadores de formularios. Es un paso vital para aprender los frameworks web modernos.

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

Comunidad de aprendizaje opcional: https://t.me/GyaanSetuAi