通过类名部分获取元素 [JavaScript]

Question

我正在尝试制作一个Chrome扩展程序。在制作扩展程序的早期阶段，代码的一部分涉及按类名获取多个元素。有几个元素的类名都长得像这样："scollerItem [很多随机字符]"。因此，我尝试列出所有以“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">

- svemal

---

为什么不使用 document.getElementsByClassName('scrollerItem')？ - connexo

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选择器？

- GreenTeaCake

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

- Ori Drori

Answer 3

使用 classList 而不是 className:

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

- Jack Bashford

---

谢谢。我不得不修改它为 if (allElements[i].classList.contains("scrollerItem")) {，但现在它可以工作了。问题现在似乎是它打印出 "[object HTMLDivElement]"，但我相信明天我会解决这个问题的。 - svemal

这是因为它正在调用 toString()。尝试使用 alert(matchingItems[0].toSource()) 来修复它。 - Jack Bashford

classList 不是一个 Array，因此没有 includes 方法。相反，它有一个 contains 方法。 - connexo

我的错 @connexo，现在已经修复了。 - Jack Bashford