В инструментах разработчика Google Chrome, когда я выбираю элемент, я вижу == $ 0 рядом с выбранным элементом. Что это значит?

Screenshot

Ответы (5)

Это последний выбранный индекс узла DOM. Chrome назначает индекс каждому выбранному вами узлу DOM. Таким образом, $ 0 всегда будет указывать на последний выбранный вами узел, а $ 1 будет указывать на узел, который вы выбрали до этого. Думайте об этом как о стеке последних выбранных узлов.

В качестве примера рассмотрим следующий

Теперь вы открыли консоль devtools и выбрали # воскресенье, # понедельник и # вторник в указанном порядке, вы получите идентификаторы вида:

$0 -> 
$1 ->
$2 ->

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

angular.element($0).scope()

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

Это подсказка Chrome, которая сообщает вам, что если вы наберете $ 0 в консоли, это будет эквивалентно этому конкретному элементу.

Внутри Chrome поддерживает стек, где $ 0 - это выбранный элемент, $ 1 - это последний выбранный элемент, $ 2 - это тот, который был выбран до $ 1 и т. Д.

Вот некоторые из его приложений:

  • Доступ к элементам DOM из консоли: $ 0
  • Доступ к их свойствам из консоли: $ 0.parentElement
  • Обновление их свойств из консоли: $ 1.classList.add (...)
  • Обновление элементов CSS из консоли: $ 0.styles.backgroundColor = "aqua"
  • Запуск событий CSS из консоли: $ 0.click ()
  • И делать гораздо более сложные вещи, например: $ 0.appendChild (document.createElement ("div"))

Посмотрите все это в действии:

enter image description here

Подтверждение:

эта функция может оказаться полезной в определенных запутанных сценариях

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

Вы можете выбрать элемент на вкладке elements и переключиться на вкладку console в Chrome. Просто введите $ 0 или $ 1 или любое другое число и нажмите ввод, и элемент отобразится в консоли для вашего использования.

screenshot of chrome dev tools

$ 0 возвращает последний выбранный элемент или объект JavaScript, $ 1 возвращает второй последний выбранный объект и т. Д.

См .: Справочник по API командной строки

Я скажу, что это просто сокращенный синтаксис для получения ссылки на элемент html во время отладки, обычно такие задачи будут выполняться этим методом

document.getElementById , document.getElementsByClassName , document.querySelector

поэтому щелчок по элементу html и получение ссылочной переменной ($ 0) в консоли - огромная экономия времени в течение дня

2022 WebDevInsider