Получить элемент по ЧАСТИ имени класса [JavaScript]

Question

Я пытаюсь сделать расширение Chrome.Часть кода (в начале создания этого расширения) включает в себя выборку нескольких элементов по имени класса.Есть несколько элементов, имена классов которых выглядят так: "scollerItem [AlotOfRandomCharacters]".Поэтому я пытаюсь перечислить все имена классов, начинающиеся с «scrollerItem», но я не совсем уверен, как это сделать.

Итак, вот мой код:

function initRE(){
    var matchingItems = [];
    var allElements = document.getElementsByTagName("div");
    for(i=0; i < allElements.length; i++)
    {
        if ( allElements [i].className == "scrollerItem" && "*" )
        {
            matchingItems.push(allElements[i]);
        }
    }
    alert(matchingItems[0]);
}

allElements указывается в списке точек останова как «HTMLCollection (623)» (примерно), но в массив «MatchItems» ничего не пересылается.Я пробовал [i].className.contains и .includes

Прямая копия одного из рассматриваемых элементов HTML:

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

Answer 1

Вы можете попробовать использовать Document.querySelectorAll () с селектором CSS , соответствующим всем классам, начиная с вашей целевой строки .

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'))

Дополнительное объяснение синтаксиса селектора CSS: Существует ли селектор CSS по префиксу класса?

Answer 2

Поскольку в элементе существует класс scrollerItem, вы можете использовать document.querySelectorAll() с .scrollerItem в качестве запроса:

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

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

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

Answer 3

Используйте classList, а не className:

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