Comment modifier des attributs, des classes et des styles dans le DOM

introduction

Dans le didacticiel précédent de ceseries, «https://www.digitalocean.com/community/tutorials/how-to-make-changes-to-the-dom[Comment apporter des modifications au DOM], ”Nous avons expliqué comment créer, insérer, remplacer et supprimer des éléments du modèle d'objet de document (DOM) avec des méthodes intégrées. En augmentant votre maîtrise de la manipulation du DOM, vous pourrez mieux utiliser les capacités interactives de JavaScript et modifier des éléments Web.

Dans ce didacticiel, nous allons apprendre à modifier davantage le DOM en modifiant les styles, les classes et d'autres attributs des nœuds d'élément HTML. Cela vous permettra de mieux comprendre comment manipuler des éléments essentiels au sein du DOM.

Examen de la sélection d'éléments

Jusqu'à récemment, une bibliothèque JavaScript populaire appeléejQuery était le plus souvent utilisée pour sélectionner et modifier des éléments dans le DOM. jQuery a simplifié le processus de sélection d'un ou de plusieurs éléments et d'appliquer les modifications à tous en même temps. Dans «https://www.digitalocean.com/community/tutorials/how-to-access-elements-in-the-dom[Comment accéder aux éléments dans les DOM], nous avons passé en revue les méthodes utilisées par les DOM pour saisir et travailler avec noeuds en JavaScript vanille.

Pour revoir,document.querySelector() etdocument.getElementById() sont les méthodes utilisées pour accéder à un seul élément. En utilisant undiv avec un attributid dans l'exemple ci-dessous, nous pouvons accéder à cet élément dans les deux sens.

Demo ID

La méthodequerySelector() est plus robuste en ce qu'elle peut sélectionner un élément sur la page par n'importe quel type de sélecteur.

// Both methods will return a single element
const demoId = document.querySelector('#demo-id');

En accédant à un seul élément, nous pouvons facilement mettre à jour une partie de l’élément telle que le texte qu’elle contient.

// Change the text of one element
demoId.textContent = 'Demo ID text updated.';

Cependant, lors de l'accès à plusieurs éléments par un sélecteur commun, tel qu'une classe spécifique, nous devons parcourir tous les éléments de la liste. Dans le code ci-dessous, nous avons deux élémentsdiv avec une valeur de classe commune.

Demo Class 1
Demo Class 2

Nous utiliseronsquerySelectorAll() pour récupérer tous les éléments auxquelsdemo-class leur est appliqué, etforEach() pour les parcourir et appliquer un changement. Il est également possible d'accéder à un élément spécifique avecquerySelectorAll() de la même manière que vous le feriez avec un tableau - en utilisant la notation entre crochets.

// Get a NodeList of all .demo elements
const demoClasses = document.querySelectorAll('.demo-class');

// Change the text of multiple elements with a loop
demoClasses.forEach(element => {
  element.textContent = 'All demo classes updated.';
});

// Access the first element in the NodeList
demoClasses[0];

C'est l'une des différences les plus importantes à prendre en compte lors de la progression de jQuery vers JavaScript. De nombreux exemples d'éléments de modification n'expliqueront pas le processus d'application de ces méthodes et propriétés à plusieurs éléments.

Les propriétés et méthodes de cet article seront souvent associées àevent listeners afin de répondre aux clics, survols ou autres déclencheurs.

[.note] #Note: Les méthodesgetElementsByClassName() etgetElementsByTagName() renverront des collections HTML qui n'ont pas accès à la méthodeforEach() que possèdequerySelectorAll(). Dans ces cas, vous devrez utiliser unfor loop standard pour parcourir la collection.
#

Modification d'attributs

Les attributs sont des valeurs contenant des informations supplémentaires sur les éléments HTML. Ils viennent généralement en pairesname/value, et peuvent être essentiels en fonction de l'élément.

Certains des attributs HTML les plus courants sont l'attributsrc d'une baliseimg, leshref d'une balisea,class,id etstyle. Pour une liste complète des attributs HTML, affichez lesattribute list sur le Mozilla Developer Network. Les éléments personnalisés qui ne font pas partie de la norme HTML seront précédés dedata-.

En JavaScript, nous avons quatre méthodes pour modifier les attributs d'élément:

Méthode La description Exemple

Méthode	La description	Exemple
`hasAttribute()`	Renvoie un booléen`true` ou`false`	`element.hasAttribute('href');`
`getAttribute()`	Renvoie la valeur d'un attribut spécifié ou`null`	`element.getAttribute('href');`
`setAttribute()`	Ajoute ou met à jour la valeur d'un attribut spécifié	`element.setAttribute('href', 'index.html');`
`removeAttribute()`	Supprime un attribut d'un élément	`element.removeAttribute('href');`

hasAttribute()

Renvoie un booléentrue oufalse

element.hasAttribute('href');

getAttribute()

Renvoie la valeur d'un attribut spécifié ounull

element.getAttribute('href');

setAttribute()

Ajoute ou met à jour la valeur d'un attribut spécifié

element.setAttribute('href', 'index.html');

removeAttribute()

Supprime un attribut d'un élément

element.removeAttribute('href');

Créons un nouveau fichier HTML avec une baliseimg avec un attribut. Nous allons créer un lien vers une image publique disponible via une URL, mais vous pouvez la remplacer par une autre image locale si vous travaillez en mode hors connexion.

attributes.html

Lorsque vous chargez le fichier HTML ci-dessus dans un navigateur Web moderne et ouvrez lesDeveloper Console intégrés, vous devriez voir quelque chose comme ceci:

First rendering of classes.html

Maintenant, nous pouvons tester toutes les méthodes d'attribut à la volée.

// Assign image element
const img = document.querySelector('img');

img.hasAttribute('src');                // returns true
img.getAttribute('src');                // returns "...shark.png"
img.removeAttribute('src');             // remove the src attribute and value

À ce stade, vous aurez supprimé l'attributsrc et la valeur associée àimg, mais vous pouvez réinitialiser cet attribut et attribuer la valeur à une autre image avecimg.setAttribute():

img.setAttribute('src', 'https://js-tutorials.nyc3.digitaloceanspaces.com/octopus.png');

Second rendering of classes.html

Enfin, nous pouvons modifier l'attribut directement en attribuant une nouvelle valeur à l'attribut en tant que propriété de l'élément, en remettant lessrc dans le fichiershark.png

img.src = 'https://js-tutorials.nyc3.digitaloceanspaces.com/shark.png';

Tout attribut peut être édité de cette manière ainsi qu'avec les méthodes ci-dessus.

Les méthodeshasAttribute() etgetAttribute() sont généralement utilisées avecconditional statements, et les méthodessetAttribute() etremoveAttribute() sont utilisées pour modifier directement le DOM.

Modification des classes

L'attributclass correspond àCSS class selectors. Cela ne doit pas être confondu avecES6 classes, un type spécial de fonction JavaScript.

Les classes CSS sont utilisées pour appliquer des styles à plusieurs éléments, à la différence des ID qui ne peuvent exister qu'une seule fois par page. En JavaScript, nous avons les propriétésclassName etclassList pour travailler avec l'attribut class.

Method/Property La description Exemple

Method/Property	La description	Exemple
`className`	Obtient ou définit la valeur de la classe	`element.className;`
`classList.add()`	Ajoute une ou plusieurs valeurs de classe	`element.classList.add('active');`
`classList.toggle()`	Active ou désactive une classe	`element.classList.toggle('active');`
`classList.contains()`	Vérifie si la valeur de classe existe	`element.classList.contains('active');`
`classList.replace()`	Remplacer une valeur de classe existante par une nouvelle valeur de classe	`element.classList.replace('old', 'new');`
`classList.remove()`	Supprimer une valeur de classe	`element.classList.remove('active');`

className

Obtient ou définit la valeur de la classe

element.className;

classList.add()

Ajoute une ou plusieurs valeurs de classe

element.classList.add('active');

classList.toggle()

Active ou désactive une classe

element.classList.toggle('active');

classList.contains()

Vérifie si la valeur de classe existe

element.classList.contains('active');

classList.replace()

Remplacer une valeur de classe existante par une nouvelle valeur de classe

element.classList.replace('old', 'new');

classList.remove()

Supprimer une valeur de classe

element.classList.remove('active');

Nous allons créer un autre fichier HTML pour travailler avec les méthodes de classe, avec deux éléments et quelques classes.

classes.html








    Div 1
    Div 2

Lorsque vous ouvrez le fichierclasses.html dans un navigateur Web, vous devriez recevoir un rendu qui ressemble à ce qui suit:

First rendering of classes.html

La propriétéclassName a été introduite pour éviter les conflits avec le mot cléclass trouvé dans JavaScript et d'autres langages ayant accès au DOM. Vous pouvez utiliserclassName pour attribuer une valeur directement à la classe.

// Select the first div
const div = document.querySelector('div');

// Assign the warning class to the first div
div.className = 'warning';

Nous avons affecté la classewarning définie dans les valeurs CSS declasses.html aux premiersdiv. Vous recevrez le résultat suivant:

Second rendering of classes.html

Notez que s'il existe déjà des classes sur l'élément, elles seront remplacées par celles-ci. Vous pouvez ajouter plusieurs classes délimitées par des espaces à l'aide de la propriétéclassName, ou l'utiliser sans opérateurs d'affectation pour obtenir la valeur de la classe sur l'élément.

L'autre façon de modifier les classes est via la propriétéclassList, qui est fournie avec quelques méthodes utiles. Ces méthodes sont similaires aux méthodes jQueryaddClass,removeClass ettoggleClass.

// Select the second div by class name
const activeDiv = document.querySelector('.active');

activeDiv.classList.add('hidden');                // Add the hidden class
activeDiv.classList.remove('hidden');             // Remove the hidden class
activeDiv.classList.toggle('hidden');             // Switch between hidden true and false
activeDiv.classList.replace('active', 'warning'); // Replace active class with warning class

Après avoir exécuté les méthodes ci-dessus, votre page Web ressemblera à ceci:

Final rendering of classes.html

Contrairement à l'exemple declassName, l'utilisation declassList.add() ajoutera une nouvelle classe à la liste des classes existantes. Vous pouvez également ajouter plusieurs classes sous forme de chaînes séparées par des virgules. Il est également possible d'utilisersetAttribute pour modifier la classe d'un élément.

Modification des styles

La propriétéstyle représente les styles en ligne sur un élément HTML. Souvent, les styles sont appliqués aux éléments via une feuille de style, comme nous l’avons déjà fait dans cet article, mais nous devons parfois ajouter ou modifier directement un style intégré.

Nous allons faire un court exemple pour illustrer les styles de montage avec JavaScript. Vous trouverez ci-dessous un nouveau fichier HTML avec undiv qui a des styles en ligne appliqués pour afficher un carré.

styles.html

Div

Lorsqu'ils sont ouverts dans un navigateur Web, lesstyles.html ressembleront à ceci:

First rendering of styles.html

Une option pour éditer les styles est avecsetAttribute().

// Select div
const div = document.querySelector('div');

// Apply style to div
div.setAttribute('style', 'text-align: center');

Cependant, cela supprimera tous les styles en ligne existants de l'élément. Comme ce n'est probablement pas l'effet escompté, il est préférable d'utiliser directement l'attributstyle

div.style.height = '100px';
div.style.width = '100px';
div.style.border = '2px solid black';

Les propriétés CSS sont écrites dans kebab-case, ce qui représente des mots minuscules séparés par des tirets. Il est important de noter que les propriétés CSS de kebab-case ne peuvent pas être utilisées sur la propriété de style JavaScript. Au lieu de cela, ils seront remplacés par leur équivalent camelCase, c'est-à-dire lorsque le premier mot est en minuscule, et tous les mots suivants sont en majuscule. En d'autres termes, au lieu detext-align, nous utiliseronstextAlign pour la propriété de style JavaScript.

// Make div into a circle and vertically center the text
div.style.borderRadius = '50%';
div.style.display = 'flex';
div.style.justifyContent = 'center';
div.style.alignItems = 'center';

Après avoir terminé les modifications de style ci-dessus, votre rendu final destyles.html affichera un cercle:

Final rendering of styles.html

Si de nombreux changements stylistiques doivent être appliqués à un élément, la meilleure chose à faire est d'appliquer les styles à une classe et d'ajouter une nouvelle classe. Cependant, dans certains cas, la modification de l'attribut de style intégré est nécessaire ou plus simple.

Conclusion

Les éléments HTML se voient souvent attribuer des informations supplémentaires sous la forme d'attributs. Les attributs peuvent être constitués de paires nom / valeur, et quelques-uns des attributs les plus courants sontclass etstyle.

Dans ce didacticiel, nous avons appris à accéder, à modifier et à supprimer des attributs d’un élément HTML dans le DOM à l’aide de JavaScript. Nous avons également appris à ajouter, supprimer, basculer et remplacer des classes CSS sur un élément et à modifier des styles CSS inline. Pour plus d'informations, consultez la documentation surattributes sur le Mozilla Developer Network.

TOC