Opérations CRUD du DOM

Le Document Object Model (DOM) est la manière dont les navigateurs représentent le HTML. Il transforme chaque élément, attribut et fragment de texte en un objet. JavaScript utilise ces objets pour modifier ce que vous voyez à l'écran.

Lorsque vous cliquez sur un bouton et qu'une page se met à jour sans être rafraîchie, JavaScript est en train de modifier le DOM.

Vous pouvez effectuer des opérations CRUD (Create, Read, Update, Delete — Créer, Lire, Mettre à jour, Supprimer) à l'aide de ces méthodes.

  1. Accéder aux éléments (Read) Pour modifier quelque chose, vous devez d'abord le trouver. Utilisez ces méthodes :
  • getElementById()
  • getElementsByClassName()
  • getElementsByTagName()
  • querySelector()
  • querySelectorAll()
  1. Créer des éléments (Create) Vous pouvez générer de nouveaux éléments HTML en utilisant JavaScript.
  • createElement("tagName") crée l'élément 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 un élément spécifique.
  • after() insère un élément après un élément spécifique.
  • insertBefore() place un élément avant un enfant spécifique.

Note : Un élément reste en mémoire jusqu'à ce que vous l'ajoutiez à la page.

  1. Mettre à jour les éléments (Update) Vous pouvez modifier le contenu existant à l'aide de ces propriétés :
  • innerText : Modifie uniquement le texte visible.
  • textContent : Modifie tout le texte, y compris le texte caché.
  • innerHTML : Modifie le contenu et vous permet d'ajouter des balises HTML.
  1. Travailler avec les attributs (Update) Les attributs fournissent des informations supplémentaires sur les éléments.
  • setAttribute(name, value) : Définit ou remplace un attribut.
  • getAttribute(name) : Récupère la valeur d'un attribut.
  • removeAttribute(name) : Supprime un attribut.
  • hasAttribute(name) : Vérifie si un attribut existe.

Conseil de pro : Utilisez classList.add() pour ajouter une classe sans supprimer les anciennes. setAttribute() remplace la valeur entière.

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

Résumé d'un flux CRUD :

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

Maîtriser ces méthodes vous permet de construire des applications interactives comme des listes de tâches ou des calculatrices. C'est une compétence essentielle pour le développement front-end.

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