querySelectorAll for element contain specific class

Question

I have few divs that contain two classes such as this:

<div class="dateNumbers"></div>
<div class="dateNumbers {{month.year + '-' + month.monthName + '-' + 'end'}}"></div>
<div class="dateNumbers {{month.year + '-' + month.monthName + '-' + 'end'}}"></div>
<div class="dateNumbers {{month.year + '-' + month.monthName + '-' + 'end'}}"></div>

where {{month.year + '-' + month.monthName + '-' + 'end'}} for a certain month is 2018-August-end

I want to select the divs that contain only 2018-August-end which I store into a variable so I tried something like this

var dataName = `2018-August-end`; // this is dynamic but for this example I have it static

document.querySelectorAll( "." + dataName);

but I get this error

Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Document': '.2018-August-end' is not a valid selector. at :1:10

why is that ?

Thanks

classes shouldn't start with a number, try adding a character before — Mohd_PH, Aug 15 '18 at 16:29
Not a duplicate, but see here: https://stackoverflow.com/questions/448981/which-characters-are-valid-in-css-class-names-selectors — Fissure King, Aug 15 '18 at 16:31

T.J. Crowder · Accepted Answer · 2018-08-15T16:37:06.500

Class name dot (.) selectors can't start with an unescaped digit (2, in your case).

The simplest solution is to just start them with a letter instead, which I strongly recommend:

Example:

const datePart = "x2018-August-end";
console.log(
  document.querySelectorAll(".\\" + datePart).length
);

<div class="dateNumbers"></div>
<div class="dateNumbers x2018-August-end"></div>
<div class="dateNumbers x2018-August-end"></div>
<div class="dateNumbers x2018-August-end"></div>

Alternately, you can use the [class~=value] notation, which is functionally identical (for HTML):

document.querySelectorAll("[class~='" + datePart + "']")

Example:

const datePart = "2018-August-end";
console.log(
  document.querySelectorAll("[class~='" + datePart + "']").length
);

<div class="dateNumbers"></div>
<div class="dateNumbers 2018-August-end"></div>
<div class="dateNumbers 2018-August-end"></div>
<div class="dateNumbers 2018-August-end"></div>

It's also possible to escape the first digit with . notation, but it's painful. (You can't just throw a backslash in front of it, as you can with some libraries like jQuery.)

score 0 · Answer 2 · answered Nov 23 '20 at 12:50

Element by tagName like this:

document.querySelectorAll(`svg,b,u,i,span,a,path,circle,rect,polygon,ellipse`)

Element by tagName and also with class:

document.querySelectorAll(`svg,b,u,i,span,a,path,circle,rect,polygon,ellipse,div[class~="background"]`)

Element by svg inner gradient stops:

document.querySelectorAll(`svg,defs,stop`)

Element by data or dataset:

document.querySelectorAll(`[data-target]`)

Element by data and ignore element that have a specific class:

document.querySelectorAll(`[data-target]:not([class*="background"]`)

querySelectorAll for element contain specific class

2 Answers2