Получить querySelector Все несколько условий

Question

Я хотел бы получить все элементы, которые содержат классы menu-item-link а также mk-image-link, Правильно ли следующее выражение?

a[class*="menu-item-link"], a[class*="mk-image-link"]

Ничего не выбрано, так что, наверное, нет:)

Спасибо за помощь.

С наилучшими пожеланиями, Антон

Answer 1

Вы должны сделать это 'a.menu-item-link, a.mk-image-link' он проверит, есть ли у этого класса.

const selected = document.querySelectorAll('a.menu-item-link, a.mk-image-link')
const selected2 = document.querySelectorAll('a.menu-item-link.js-smooth-scroll, a.mk-image-link.js-smooth-scroll')

console.log(selected)
console.log(selected2)

<div class="menu-item-link"><div>
<div><div>
<a class="menu-item-link"></a>
<a class="mk-image-link"></a>
<a class="mk-image-link menu-item-link"></a>
<a class="menu-item-link js-smooth-scroll" href="/superfood-rezepte/">SUPERFOOD REZEPTE</a> <a href="...." target="_self" class="mk-image-link">

Answer 2

document.querySelectorAllпозволяет группировать селекторы.

Обратите внимание, что он будет выбирать все элементы, которые имеют указанный class names, поэтому подстановочный знак не нужен. т.е. если вы нацелены наmenu-item-linkа также mk-image-linkниже должно работать для вас.

Итак, вы можете попробовать ниже:

var elements = document.querySelectorAll("a[class~='menu-item-link'], a[class~='mk-image-link']"); // OR 
elements = document.querySelectorAll("a.menu-item-link, a.mk-image-link"); // Would both selects the same
elements.forEach(function(element, index, array) {
  element.style.backgroundColor = "#999";
});

<a class="js menu-item-link js-smooth-scroll" href="/superfood-rezepte/">SUPERFOOD REZEPTE</a> <br>
<a class="js menu-item-link js-smooth-scroll-a" href="/superfood-rezepte/">SUPERFOOD </a> <br>
<br>
<a href="#" target="_self" class="mk-image-link">Something</a>
<br>
<a href="#" target="_self" class="mk-image-link1">Another Something</a>
<br>
<a href="#" target="_self" class="mk-image-link js-smooth-scroll-b">Another Something</a>