Définition
JavaScript
Un langage de programmation principalement utilisé pour créer et contrôler du contenu dynamique sur une page web.
DOM
Document Object Model, une interface de programmation pour les documents HTML et XML. Elle fournit une représentation structurée du document permettant de modifier son contenu et son style.
Élément
Un élément HTML qui représente une partie de la structure d'un document web, tel qu'un paragraphe, un en-tête ou un formulaire.
Manipuler le DOM avec JavaScript
La manipulation du DOM avec JavaScript permet de modifier dynamiquement les éléments d'une page web. Cela inclut la création, la suppression et la modification d'éléments, d'attributs et de styles. JavaScript accède au DOM à l'aide de l'objet 'document', qui représente la page.
Créer un nouvel élément
Pour ajouter un nouvel élément à une page web, JavaScript utilise la méthode 'document.createElement'. Cette opération génère un nouvel élément du DOM sans l'ajouter immédiatement au document. Avant d'intégrer cet élément, il est possible de lui définir des attributs et du contenu.
Ajouter du contenu à l'élément
Une fois l'élément créé, du contenu peut y être ajouté en utilisant 'element.innerHTML' ou 'element.textContent'. 'innerHTML' insère du contenu HTML complet tandis que 'textContent' assure l'intégrité du texte ajouté, sans interpréter d'éléments HTML inclus.
Insertion de l'élément dans le DOM
L'élément nouvellement créé est intégré au DOM avec la méthode 'appendChild' ou 'insertBefore'. 'appendChild' ajoute l'élément comme dernier enfant d'un élément parent spécifié. Pour une insertion spécifique, 'insertBefore' place l'élément juste avant un élément enfant donné.
Configurer les attributs et styles de l'élément
Les attributs et styles peuvent être définis à l'aide de 'element.setAttribute' et 'element.style'. 'setAttribute' attribue une valeur spécifique à un attribut, tandis que 'element.style' applique directement des styles en-ligne CSS à l'élément.
A retenir :
En utilisant JavaScript pour créer des éléments, nous manipulons le DOM de manière dynamique. La création d'un élément implique son instanciation avec 'createElement', l'ajout de contenu via 'innerHTML' ou 'textContent', et son insertion avec 'appendChild' ou 'insertBefore'. Les attributs et styles complètent la configuration de l'élément développé.
