access html classes like css `tag[class*="samepart-"]` in js

Question

So I have this css:

tag[class*="samepart-"] {
  /* css code for all html classes with "samepart-" in their class name */
}

With this html:

<div class="samepart-a">some html a</div>
<div class="samepart-b">some html b</div>
<div class="samepart-c">some html c</div>

Now I want to get all the html classes with "samepart-" in JS without adding an extra html class to the "samepart-" classes.

This is what I tried:

const htmlClasses1 = document.getElementsByClassName("samepart-");
console.log(htmlClasses1[0]);

const htmlClasses2 = document.getElementsByClassName('*["samepart-"]');
console.log(htmlClasses2[0]);

const htmlClasses3 = document.getElementsByClassName('[class*="samepart-"]');
console.log(htmlClasses3[0]);

const htmlClasses4 = document.getElementsByClassName(["samepart-"]);
console.log(htmlClasses4[0]);

div[class*="samepart-"] {
  display: inline-block;
  width: 120px;
  height: 120px;
  background-color: #00F;
  color: #0FF;
}

<div class="samepart-a">some html a</div>
<div class="samepart-b">some html b</div>
<div class="samepart-c">some html c</div>

getElementsByClassName([class^='samepart-'] – Gerard Apr 16 '18 at 12:35 — Gerard, Apr 16 '18 at 12:35

Peter Wilson · Answer 1 · 2018-04-16T15:08:28.767

2

try document.querySelectorAll('[class*="samepart-"]')

console.log(document.querySelectorAll('[class*="samepart-"]'))

<div class="samepart-a">some html a</div>
<div class="samepart-b">some html b</div>
<div class="samepart-c">some html c</div>

edited Apr 16 '18 at 15:08

answered Apr 16 '18 at 12:35

Peter Wilson

4,150
3
35
62

score 2 · Accepted Answer · answered Apr 16 '18 at 12:36

2

Use querySelectorAll() :

PS: I edited *= to ^= since it seems you only want classes starting with samepart.

const htmlClasses = document.querySelectorAll("div[class^='samepart-']");
console.log(htmlClasses);

div[class*="samepart-"] {
  display: inline-block;
  width: 120px;
  height: 120px;
  background-color: #00F;
  color: #0FF;
}

<div class="samepart-a">some html a</div>
<div class="samepart-b">some html b</div>
<div class="samepart-c">some html c</div>

answered Apr 16 '18 at 12:36

Zenoo

12,670
4
45
69

can you explain what the difference is between `*=` and `^=`? – TessavWalstijn Apr 16 '18 at 12:40
It only selects attributes *starting* with what comes next, instead of `*` which only checks if the attribute contains what comes next. – Zenoo Apr 16 '18 at 12:41
So that works the same for the css? That would be nice. – TessavWalstijn Apr 16 '18 at 12:43
Indeed it does. – Zenoo Apr 16 '18 at 12:43

access html classes like css `tag[class*="samepart-"]` in js

2 Answers2