Почему это выражение незаконно в querySelectorAll

Question

Почему запрещено использовать el.querySelectorAll с селектором, который начинается с '>'? Какое простое альтернативное решение?

Этот код, приведенный выше, приведет к возникновению исключения DOM 12. Решение должно избегать использования jquery, который поддерживает это без ошибок. Решения Zepto могут быть предоставлены, поскольку это не поддерживается в Zepto.

Когда селектор не начинается с «>» действительно:

el.querySelectorAll('div > div'); 

Answer 1

document.querySelectorAll ожидает строку, содержащую один или несколько CSS селекторов, разделенных запятыми.

'> div' не действительный селектор css.

> Детский комбинатор. Детский комбинатор описывает отношения детства между двумя элементами.

'> div' имеет только один элемент. ' div >' тоже не работает.

Для получения дополнительной информации см

• https://developer.mozilla.org/en-US/docs/Web/API/Document.querySelectorAll
• http://easy-css.appspot.com/?chap=chap-4-7-2&prev=35&next=37&current=36
• http://www.w3.org/TR/selectors/#child-combinators

Answer 2

element = baseElement.querySelector(selectors) 

selectors потребности следовать стандартный синтаксис CSS. Таким образом, хотя querySelector является методом элемента, аргумент selectors должен формировать действительный css-селектор; то есть тот, который вы можете использовать в таблице стилей.

MDN reference

Answer 3

В растворе с использованием зепто:

$(el.childNodes).find('div') 

Если вы просто хотите, чтобы все прямые узлы-потомки, хотя и не «ДИВ» потомок, то этот подход, вероятно, не поможет, так как с помощью .find ('*') предоставит больше прямых потомков.

Как описано в другом ответе, селектор, использующий '>', должен иметь перед ним селекторное выражение, а следующее за ним (т.е. div> div).

Answer 4

Как-то у меня есть ощущение, что OP просто ищет

el.querySelector('body > div');