querySelectorAll не работает с вложенными UL

Question

Я вижу что-то странное, когда querySelectorAll вызывается для вложенных объектов UL. Может кто-нибудь подтвердить, что это ошибка, или я думаю об этом неправильно?

Учитывая этот HTML:

<ul class="first">
<li>
    <ul class="second">
        <li class="third"></li>
    </ul>
</li>

Я обнаружил, что использование селектора 'ul.second li' с querySelectorAll возвращает li.third, даже когда вызывается так:

var ulSecond = document.querySelectorAll('ul')[1];
ulSecond.querySelectorAll('ul.second li'). // result is li.third

Я сумасшедший? Я перепробовал кучу других случаев, и все они работают правильно, но это не так.

Вот скрипка того, что я пытаюсь сделать.

https://jsfiddle.net/gh9j04v5/

Answer 1

Я думаю, что ваша путаница заключается в том, что призыв querySelectorAll('ul.second li') на <ul class="second"> возвращает вас <li class="third"></li> когда вы ожидаете, что он будет пустым.

Когда вы выполняете querySelectorAll он ищет потомков элемента для элементов, которые соответствуют запросу, как весь запрос.

Так что для вашего примера он находит любого потомка "second", который "является элементом LI с ul.second в качестве предка".

Это не последовательно находит каждый элемент в запросе, как

elem.querySelectorAll('ul.second')...forEach(querySelectorAll('li'))

или "найти все ul.second под elem, а затем найти каждый li под теми"

Вы можете увидеть это поведение на любой странице, используя запрос как

document.body.querySelectorAll('body div')

который вернет все divна странице, несмотря на запрос body