通过类名 [JavaScript] 的 PART 获取元素答案

【问题标题】：Get element by PART of class name [JavaScript]通过类名 [JavaScript] 的 PART 获取元素
【发布时间】：2019-06-11 00:52:21
【问题描述】：

我正在尝试制作 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">

【问题讨论】：

为什么不document.getElementsByClassName('scrollerItem')？

标签： javascript html arrays object

【解决方案1】：

您可以尝试将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?

【讨论】：

【解决方案2】：

使用classList 而不是className：

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

【讨论】：

谢谢。必须将其更改为 ` if (allElements[i].classList.contains("scrollerItem")) { ` 但它现在可以工作了。现在的问题似乎是它打印了“[object HTMLDivElement]”，但我确定我明天会解决这个问题。
那是因为toString() 被调用了。尝试alert(matchingItems[0].toSource() 修复它。
classList 不是 Array 并且没有 includes 方法。相反，它有一个contains 方法。
我的坏@connexo，现在修复了。

【解决方案3】：

由于元素上存在类scrollerItem，您可以使用document.querySelectorAll() 和.scrollerItem 作为查询：

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

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

&lt;div class="scrollerItem s1d8yj03-2 ebdCEL Post t3_agnhuk  s1ukwo15-0 RqhAo" id="t3_agnhuk" tabindex="-1"&gt;

【讨论】：