Résumé : techniques de modification du DOM

Modifier un élément

Nous avons abordé de nombreuses manières de modifier les aspects d'un élément :

Modifier les attributs

On peut définir l'attribut d'un élément en utilisant la propriété de même nom. Par exemple, pour modifier l'attribut src d'une <img> :

imgEl.src = "http://www.dogs.com/dog.gif";

De plus, on peut utiliser la méthode setAttribute, comme cela :

imgEl.setAttribute("src", "http://www.dogs.com/dog.gif");

Si vous souhaitez supprimer un attribut, vous devez le faire avec removeAttribute. Par exemple, pour supprimer l'attribut disabled d'un bouton, et donc l'activer :

imgEl.removeAttribute("disabled");

Modifiez les styles

On peut modifier les styles de la même manière qu'on modifie les attributs, en accédant à la propriété style de l'élément, et en définissant la propriété correspondante. Par exemple, pour modifier la couleur :

headingEl.style.color = "hotpink";

N'oubliez pas de "camelCase" (mettre des majuscules au début des mots, et supprimer les traits d'union) les noms de propriété CSS composées de plusieurs mots, car les traits d'union ne peuvent pas être utilisés dans les noms de propriétés en JS :

headingEl.style.backgroundColor = "salmon";

Modifier les noms de classe

Pour ajouter une classe à un élément, on peut définir la propriété className :

mainEl.className = "attention";

Cela va écraser les classes existantes. Si on souhaite juste en ajouter une de plus à la liste de classes existantes, on doit plutôt faire ceci :

mainEl.className += " attention";

Sur les navigateurs récents, on peut utiliser la fonctionnalité classList à la place :

mainEl.classList().add("attention");

Modifier le HTML ou le texte

Pour remplacer complètement le contenu d'un élément par une chaîne quelconque de caractères contenant du HTML, utilisez innerHTML :

mainEl.innerHTML = "les chats sont les <strong>plus beaux</strong>";

Si il n'y a pas besoin de passer de balises HTML, on peut utiliser textContent à la place :

mainEl.textContent = "les chats sont les plus beaux";

Généralement, on doit faire attention quand on utilise ces 2 propriétés, car elles suppriment aussi les écouteurs d'événements (qu'on va apprendre dans le prochain module).

Créer des éléments à partir de rien

Il y a tout un ensemble de fonctions qu'on peut utiliser pour créer entièrement de nouveaux éléments et les ajouter à la page.

Pour créer un nouvel élément, utilisez la méthode bien nommée createElement :

var imgEl = document.createElement("img");

Pour l'ajouter à la page, appelez appendChild sur l'élément cible parent :

document.body.appendChild(imgEl);

De la même façon, vous pouvez utiliser insertBefore, replaceChild, removeChild et insertAdjacentHTML.

Vous souhaitez rejoindre la discussion ?

Connectez-vous

Trier par :

Pas encore de posts.

Vous comprenez l'anglais ? Cliquez ici pour participer à d'autres discussions sur Khan Academy en anglais.