Можно ли в одну строчку найти все элементы, которые содержат другие?

Question

[dollar]

Например, такое:
document.querySelector('a h3')
находит, но выбирает "h3", а нужны именно корневые элементы "a".
А ведь условие, что именно содержит, может быть гораздо сложнее, например "a div span .class".
Неужели не обойтись без parentNode() и т.п.?

Comments

[Bhudh]

<offtopic>
А вставка блочного элемента в строчный вообще валидна?
</offtopic>

[dollar]

Bhudh, Нет, но это для примера. К тому же там любые стили могут быть.

Answer 1

[0xD34F]

const ancestor = 'селектор элементов, которые надо получить';
const descendant = 'селектор вложенных элементов';

Вариант раз - получаем всех потенциальных предков, отбираем тех, кто содержит кого надо:

Array.prototype.filter.call(
  document.querySelectorAll(ancestor),
  n => n.querySelector(descendant)
)

Вариант два - получаем тех, кто содержится внутри нужных элементов, поднимаемся вверх:

Array.from(
  document.querySelectorAll(`${ancestor} ${descendant}`),
  n => n.closest(ancestor)
)

Вариант три (ну, два с половиной) - получаем потенциальных потомков, пробуем подняться до нужных предков:

[...document.querySelectorAll(descendant)].reduce(
  (acc, n) => ((n = n.closest(ancestor)) && acc.push(n), acc),
  []
)

UPD. Наконец-то дождались (ну, почти):

document.querySelectorAll(`${ancestor}:has(${descendant})`)