3
votes

Récupère l'élément par PART du nom de la classe [JavaScript]

J'essaye de créer une extension Chrome. Une partie du code (au début de la création de cette extension) consiste à récupérer plusieurs éléments par leur nom de classe. Il existe plusieurs éléments dont le nom de classe ressemble à ceci: "scollerItem [AlotOfRandomCharacters]". J'essaie donc de lister tous les noms de classe commençant par "scrollerItem", mais je ne sais pas trop comment s'y prendre.

Voici donc mon code pour l'instant:

<div class="scrollerItem s1d8yj03-2 ebdCEL Post t3_agnhuk  s1ukwo15-0 RqhAo" id="t3_agnhuk" tabindex="-1">

javascript html object arrays

1 commentaires

Pourquoi pas document.getElementsByClassName ('scrollerItem') ?

3 Réponses :

1
votes

Utilisez classList et non className:

if (allElements[i].classList.contains("scrollerItem") {...}

4 commentaires

Merci. J'ai dû le changer en `if (allElements [i] .classList.contains (" scrollerItem ")) {` mais ça marche maintenant. Le problème semble maintenant être qu'il imprime "[object HTMLDivElement]" mais je suis sûr que je vais contourner cela demain.

C'est parce que toString () est appelé dessus. Essayez alert (matchingItems [0] .toSource () pour résoudre ce problème.

classList n'est pas un Array et n'a pas de méthode includes . Au lieu de cela, il a une méthode contient .

Mon mauvais @connexo, corrigé maintenant.

3
votes

Vous pouvez essayer d'utiliser Document.querySelectorAll () avec un sélecteur CSS correspondant à toutes les classes commençant par votre chaîne cible a >.

let elems = document.querySelectorAll("div[class^='scrollerItem'], div[class*=' scrollerItem]");
let classes = Array.from(elems).map(e => Array.from(e.classList)).reduce((arr, res) => {
    res = res.concat(arr);
    return res;
}, []).filter(cls => cls.startsWith('scrollerItem'))

Explication supplémentaire de la syntaxe du sélecteur CSS: Existe-t-il un sélecteur CSS par préfixe de classe?

0 commentaires

1
votes

Puisque la classe scrollerItem existe sur l'élément, vous pouvez utiliser document.querySelectorAll () avec .scrollerItem comme requête:

<div class="scrollerItem s1d8yj03-2 ebdCEL Post t3_agnhuk  s1ukwo15-0 RqhAo" id="t3_agnhuk" tabindex="-1">

const result = document.querySelectorAll('.scrollerItem');

console.log(Array.from(result));

0 commentaires