Opérations CRUD du DOM

Le Document Object Model (DOM) est une structure en arbre pour votre HTML. JavaScript l'utilise pour accéder à chaque élément, attribut et fragment de texte d'une page, et pour les modifier.

Lorsque vous cliquez sur un bouton et que la page se met à jour sans rafraîchissement, vous voyez la manipulation du DOM en action.

Voici comment effectuer les opérations CRUD (Create, Read, Update, Delete — Créer, Lire, Mettre à jour, Supprimer).

  1. Read (Lire) : Accéder aux éléments Utilisez ces méthodes pour trouver des éléments sur votre page :
  • getElementById()
  • getElementsByClassName()
  • getElementsByTagName()
  • querySelector()
  • querySelectorAll()
  1. Create (Créer) : Créer de nouveaux éléments Vous pouvez générer de nouveaux éléments HTML à l'aide de JavaScript.
  • createElement(): Crée une nouvelle balise en mémoire.
  • append(): Ajoute du contenu à la fin d'un parent.
  • appendChild(): Ajoute un nœud unique comme dernier enfant.
  • prepend(): Ajoute du contenu au début d'un parent.
  • before(): Insère un élément avant une cible spécifique.
  • after(): Insère un élément après une cible spécifique.
  • insertBefore(): Place un nouvel élément avant un enfant existant.
  1. Update (Mettre à jour) : Modifier le contenu Modifiez ce que les utilisateurs voient à l'écran :
  • innerText: Met à jour uniquement le texte visible.
  • textContent: Met à jour tout le texte, y compris le texte caché.
  • innerHTML: Met à jour le contenu et vous permet d'ajouter des balises HTML.
  1. Attributes (Attributs) : Gérer les propriétés Les attributs ajoutent des informations supplémentaires à vos balises.
  • setAttribute(): Définit une nouvelle valeur pour un attribut. Notez que cela remplace l'ancienne valeur.
  • getAttribute(): Récupère la valeur actuelle.
  • removeAttribute(): Supprime un attribut.
  • hasAttribute(): Vérifie si un attribut existe.

Astuce de pro : Utilisez classList.add() pour ajouter une classe sans supprimer vos classes actuelles. Utilisez setAttribute() pour les attributs personnalisés.

  1. Delete (Supprimer) : Supprimer des éléments Pour supprimer un élément de la page, utilisez :
  • remove()

Résumé du flux CRUD :

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

Maîtriser ces méthodes vous permet de construire des outils interactifs tels que des listes de tâches, des calculatrices et des validateurs de formulaires. C'est une étape essentielle pour apprendre les frameworks web modernes.

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

Communauté d'apprentissage optionnelle : https://t.me/GyaanSetuAi