При использовании querySelectorAll есть ли способ ссылаться на непосредственные дочерние элементы контекстного узла без использования идентификаторов?

скажем, у меня есть структура HTML, как

<div id="a">
  <div id="b">
    <div id="c"></div>
  </div>
</div>

чтобы сделать запрос для детей "a" с помощью querySelectorAll я могу сделать что-то вроде

//Get "b", but not "c"
document.querySelectorAll('#a > div')

у меня вопрос: возможно ли это сделать без идентификатора, ссылаясь непосредственно на узел? Я пытался сделать

var a_div = document.getElementById('a')
a_div.querySelectorAll('> div') //<-- error here

но я получаю сообщение об ошибке, сообщающее мне, что селектор, который я использовал, недействителен.

и в случае, если кому-то интересно, мой реальный случай использования будет чем-то большим сложно, как "> .foo. бар.баз ' поэтому я предпочел бы избежать ручного обхода DOM. В настоящее время я добавляю временный идентификатор в корневой div, но это похоже на уродливый Хак...

6
css-selectors javascript selectors-api

3 ответов

нет, нет никакого способа (пока) для ссылки на все дочерние элементы некоторого элемента без использования ссылки на этот элемент. Потому что > это ребенок комбинатора, который представляет отношение между родительским и дочерним элементом, a простой селектор (родитель) необходим (который отсутствует в вашем примере).

в комментарии BoltClock говорит что селекторы API Уровень 2 спецификация определяет способ findAllимя мая изменить " который принимает в качестве аргумента то, что, вероятно, будет известно как относительный селектор (селектор, который может начинаться с комбинатора, а не составного селектора)".
Когда это реализовано, его можно использовать следующим образом:

a_div.findAll('> div');
4
document.querySelector('#a').querySelectorAll(':scope > div')

Я не уверен в поддержке браузера, но я использую его в chrome и chrome mobile packaged apps, и он отлично работает.

9

Я думаю, что я, должно быть, неправильно понял ваш вопрос, но вот как я его интерпретирую..

var a = document.getElementById('a')
var results = a.querySelectorAll('div');

результаты теперь будут содержать все ваши дочерние divs.

-2