通过类名的 PART 获取元素 [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)”（大致），但没有任何内容转发到“matchingItems”数组。我试着[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 选择器语法补充说明：Is there a CSS selector by class prefix?

Answer 2

使用classList不className：

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