querySelectorAll для элемента, содержащего определенный класс

Question

У меня есть несколько div, которые содержат два класса, такие как этот:

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

где {{month.year + '-' + month.monthName + '-' + 'end'}} на определенный месяц 2018-August-end

Я хочу выбрать div, которые содержат только 2018-August-end который я храню в переменную, поэтому я попытался что-то вроде этого

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

document.querySelectorAll( "." + dataName);

но я получаю эту ошибку

Uncaught DOMException: не удалось выполнить 'querySelectorAll' для 'Document': '.2018-August-end' не является допустимым селектором. в:1:10

это почему?

Спасибо

Answer 1

Название класса точка ( . ) селекторы не могут начинаться с неэкранированной цифры (2, в твоем случае).

Самое простое решение - просто начать их с буквы, которую я настоятельно рекомендую:

Пример:

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>

Кроме того, вы можете использовать [class~=value] обозначение, которое функционально идентично (для HTML):

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

Пример:

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>

Также возможно экранировать первую цифру с помощью . запись, но это больно. (Вы не можете просто бросить обратную косую черту перед ним, как вы можете с некоторыми библиотеками, такими как jQuery.)

Answer 2

Элемент по tagName выглядит так:

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

Элемент по tagName, а также с классом:

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

Элемент по внутреннему градиенту svg останавливается:

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

Элемент по данным или набору данных:

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

Элемент за данными и игнорировать элемент, имеющий определенный класс:

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