Элементы, которые нельзя выбрать до проверки в Dev Tools

Question

Увлекательная ситуация.

Я пытаюсь выбрать элементы по имени класса, просто набрав в консоли Chrome Dev Tools. Я вижу элементы, которые хочу выбрать, и они видны на странице. Я жду 3+ секунды для загрузки страницы, прежде чем перейти непосредственно к консоли разработчика и набрать:

document.getElementsByClassName("example");
>> HTMLCollection []

Затем я щелкаю правой кнопкой мыши по рассматриваемому элементу и нажимаю «Осмотреть». Затем я возвращаюсь к консоли и набираю:

document.getElementsByClassName("example");
>> HTMLCollection [div.example.row]

Так что теперь элементы есть! Но я ничего не делал в Dev Tools при проверке элементов, кроме как навести на них курсор. Может кто-нибудь помочь объяснить эту тайну? Большое спасибо.

Если есть какое-либо объяснение, я использую Quovo . Вот демо: https://youtu.be/lPcIYupa2kY.

Answer 1

Я понял, что в этом случае проблема заключалась в том, что данный элемент был в фрейме. Столкнулся с этой проблемой здесь: SecurityError: заблокирован фрейм с источником от доступа к фрейму перекрестного происхождения .

Answer 2

То, что вы описываете, на самом деле не так уж и увлекательно. Это просто вопрос понимания того, как консоль сообщает о значениях.

При вводе:

document.getElementsByClassName("example");

консоль ответит сообщением о возвращаемом значении этого оператора. getElementsByClassName() возвращает список узлов (также известный как HTML-коллекция), поэтому консоль показывает вам:

HTMLCollection []

Элементы были там все время. Если бы вы набрали:

document.getElementsByClassName("example")[0];

Консоль сообщит об этом конкретном элементе DOM. И, если бы вы набрали:

document.getElementsByClassName("example").length;

Консоль сообщит о количестве элементов в этой коллекции.

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

По сути, все это сводится к знанию того, как интерпретировать вывод консоли. Дело не в том, что DOM готов в одном случае, а не в другом.

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