Entre ça :
window.addEventListener('load', () => {
const images = document.getElementsByTagName('img');
for (let i = 0; i < images.length; i++) {
if (images[i].alt !== '') {
images[i].classList.add('a42-ac-replace-img');
}
}
});Et ça :
window.addEventListener('load', () => {
const images = document.querySelectorAll('img:not([alt=""])');
for (let i = 0; i < images.length; i++) {
images[i].classList.add('a42-ac-replace-img');
}
});C’est quoi le :
- Plus efficace ?
- Rapide ?
- Recommandé ?
- Plus élégant ?
Les deux ayant pour fonction d’ajouter une classe a42-ac-replace-img aux balises images possédant un attribut alt non vide.
Par ailleurs, plutôt que :
for (let i = 0; i < images.length; i++) {
images[i].classList.add('a42-ac-replace-img');
}Est-ce qu’il ne vaudrait mieux pas faire :
images.forEach(function(image) {
image.classList.add('a42-ac-replace-img');
});Voilà, c’est tout pour ce matin :-)
Quant à cet après-midi, je pense qu’on peut même aller plus loin en utilisant la syntaxe ES6 :
window.addEventListener('load', () => {
const images = document.querySelectorAll('img:not([alt=""])');
images.forEach((image) => image.classList.add('a42-ac-replace-img'));
});
1 De biou -
Je ne suis pas un cador du JS, mais je préfère la version 2 dans les 2 cas.
Dans le premier cas doit être plus efficace car c’est le browser qui fait le gros de la recherche dans le dom. Pour l’autre, il ne doit pas y avoir de grosse différence mais c’est pour moi plus facile à lire.
2 De Franck -
Merci biou !
3 De Nicolas -
Aucun des deux.
J’ajoute la règle dans la css pour ce cas là pour mettre en évidence les images sans attribut alt. On peut se baser sur un parent présent ou non (par exemple sur le tag html ou body) pour que la règle soit active. Evidemment il faut que ton ploug ajoute cette classe à l’activation.
4 De Franck -
Euh, ok Nicolas, mais je ne vois pas comment tu peux ajouter une classe, en l’occurence a42-ac-replace-img, à toutes les images sans alt (ou alt vide) juste en ajoutant une règle CSS.
Explique !
5 De Biou -
Effectivement, on pourrait faire comme Nicolas le dit:
img:not([alt=”“]) { //copy paste des règles css de la classe a42-ac-replace-img}
Ça ne marche que si la classe ne sert qu’à changer le style et n’est pas utilisée comme un état en JS. Faudrait voir le reste du code :)
6 De Franck -
Ok (je m’en doutais un peu), mais ça rend le code plus dépendant du code de la bibliothèque d’Access42 et je voudrais éviter.