Get element by PART of class name [JavaScript]

Question

I'm trying to make a chrome extension. A part of the code (early on in the making of this extension) involves fetching several elements by their class name. There are several elements whos class name all look like this: "scollerItem [AlotOfRandomCharacters]". So I'm trying to list all classNames that start with "scrollerItem", but i'm not quite sure how to go about it.

So here's my code so far:

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 is listed in the breakpoint watchlist as "HTMLCollection(623)" (roughly), but nothing is forwarded to the "matchingItems" array. I've tried [i].className.contains and .includes

Direct copy of one of the HTML Elements in question:

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

Why not document.getElementsByClassName('scrollerItem')?

connexo
– connexo

2019-01-16 22:00:25 +00:00
Commented Jan 16, 2019 at 22:00 — connexo
– connexo, Commented Jan 16, 2019 at 22:00

GreenTeaCake · Accepted Answer · 2019-01-16 22:11:39Z

10

You can try to use Document.querySelectorAll() with a 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'))

Additional explanation of CSS selector syntax: Is there a CSS selector by class prefix?

edited Jan 16, 2019 at 22:11

answered Jan 16, 2019 at 21:26

GreenTeaCake

85810 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ori Drori · Accepted Answer · 2019-01-16 21:28:47Z

3

Since the class scrollerItem exists on the element, you can use document.querySelectorAll() with the .scrollerItem as the query:

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

answered Jan 16, 2019 at 21:28

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

Comments

Jack Bashford · Accepted Answer · 2019-01-16 22:04:40Z

1

Use classList not className:

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

edited Jan 16, 2019 at 22:04

answered Jan 16, 2019 at 21:17

Jack Bashford

44.3k11 gold badges56 silver badges84 bronze badges

4 Comments

svemal Over a year ago

Thanks. Had to alter it to ` if (allElements[i].classList.contains("scrollerItem")) { ` but it's working now. Problem now seems to be it prints "[object HTMLDivElement]" but im sure i'll get around that tomorrow.

Jack Bashford Over a year ago

That's because toString() is being called upon it. Try alert(matchingItems[0].toSource() to fix it.

connexo Over a year ago

classList is not an Array and has no includes method. Instead it has a contains method.

Jack Bashford Over a year ago

My bad @connexo, fixed now.

Collectives™ on Stack Overflow

Get element by PART of class name [JavaScript]

3 Answers 3

Comments

Comments

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

4 Comments

Linked

Related