Get element by PART of class name [JavaScript]
Solution 1
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?
Solution 2
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">
Solution 3
Use classList
not className
:
if (allElements[i].classList.contains("scrollerItem") {...}
svemal
Updated on August 02, 2022Comments
-
svemal over 1 year
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">
-
connexo over 5 yearsWhy not
document.getElementsByClassName('scrollerItem')
?
-
-
svemal over 5 yearsThanks. 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 5 yearsThat's because
toString()
is being called upon it. Tryalert(matchingItems[0].toSource()
to fix it. -
connexo over 5 years
classList
is not anArray
and has noincludes
method. Instead it has acontains
method. -
Jack Bashford over 5 yearsMy bad @connexo, fixed now.