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

使用classList而不是className：

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

Answer 2

您可以尝试将Document.querySelectorAll()与CSS selector matching all classes starting with your target string结合使用。

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 3

由于元素上存在类scrollerItem，因此可以将.scrollerItem与document.querySelectorAll()一起用作查询：

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">

通过类名称[JavaScript]

3 个答案: