Как найти элемент имеющий определенный класс и еще значение?

Question

[Александр]

Вопрос сформулирован не очень корректно, но по-другому не знаю как спросить.
На странице много элементов с классом "element", нужно взять именно тот, что имеет data-attr="this-element"

Answer 1

[0xD34F]

О каких классе, имени атрибута и значении идёт речь:

const className = 'element';
const attrName = 'data-attr';
const attrValue = 'this-element';

Если больше заранее ничего не известно, то собираем селектор и получаем элемент:

const elem = document.querySelector(`.${className}[${attrName}="${attrValue}"]`);

Если же вдруг уже была получена коллекция элементов с указанным классом...

const elems = document.getElementsByClassName(className);

// или

const elems = document.querySelectorAll('.' + className);

...то имеет смысл поискать в ней вместо всей страницы:

const elem = Array.prototype.find.call(
  elems,
  n => n.getAttribute(attrName) === attrValue
);

// или

let elem = null;
for (const n of elems) {
  if ((n.attributes[attrName] || {}).value === attrValue) {
    elem = n;
    break;
  }
}

// или

let elem = null;
for (let i = 0; !elem && i < elems.length; i++) {
  elem = elems[i].matches(`[${attrName}="${attrValue}"]`) ? elems[i] : elem;
}

Answer 2

[nakree]

let elem = document.querySelector('.element[data-attr=this-element]')

let [elem] = [...document.getElementsByClassName('element')]
.filter((item) => { return item.getAttribute('data-attr') === 'this-element' })

let [elem] = [...document.getElementsByClassName('element')]
.filter((item) => { return item.dataset.attr === 'this-element' })

https://jsfiddle.net/ohpaL3nj/20/