В mdn web docs метод Element.querySelector говорит, что он должен быть потомком, но пример показывает иное - PullRequest
Новая
       74

В mdn web docs метод Element.querySelector говорит, что он должен быть потомком, но пример показывает иное

2 голосов
/ 13 июля 2020

Я изучаю JavaScript из веб-документации MDN. Я изучал метод Element.querySelector().

Написано, что он возвращает первый элемент, который является потомком элемента, на котором он вызывается, который соответствует указанной группе селекторов.

Но приведен пример, который противоречит этому факту. 

var baseElement = document.querySelector("p");
document.getElementById("output").innerHTML =
  (baseElement.querySelector("div span").innerHTML);
<div>
  <h5>Original content</h5>
  <p>
    inside paragraph
    <span>inside span</span>
    inside paragraph
  </p>
</div>
<div>
  <h5>Output</h5>
  <div id="output"></div>
</div>

Здесь тег div не является потомком тега p, но этот код работает.

Можете указать, где я я иду не так?

1 Ответ

2 голосов
/ 13 июля 2020

Element.querySelector() сначала применяет CSS селекторы, переданные методу .querySelector(), для всего документа и , а не базовый элемент , на котором был вызван .querySelector(). Это делается для создания начального набора потенциальных элементов.

После создания начального набора потенциальных элементов список потенциальных элементов затем фильтруется, чтобы сохранить только те элементы, которые являются потомками базового элемента. Наконец, возвращается первый элемент из этого отфильтрованного списка.

В вашем примере кода сначала выполняется поиск элементов, соответствующих div span, во всем документе. Поскольку во всем документе есть только один элемент, который соответствует селектору div span, начальный набор потенциальных элементов содержит только один элемент span. После этого этот элемент span проверяется, является ли он потомком baseElement. Поскольку в данном случае он является потомком baseElement, он возвращается.

То, что я объяснил выше, записано под заголовком «Возвращаемое значение» в MDN - Element.querySelector ()

При сопоставлении учитывается вся иерархия элементов, включая те вне набора элементов, включая baseElement и его потомки; другими словами, селекторы сначала применяются ко всему документу, а не к базовому элементу, чтобы сгенерировать начальный список потенциальных элементов. Затем полученные элементы проверяются на предмет того, являются ли они потомками baseElement. Первое совпадение этих оставшихся элементов возвращается методом querySelector ().

...