google-chrome google-chrome-devtools code-inspection

Что значит ==$0 (двойной доллар равен нулю) означает в Инструменты разработчика Chrome?

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

Скриншот

294
5
5 ответов

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

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

<div id="sunday"></div>
<div id="monday"></div>
<div id="tuesday"></div>

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

$0 -> <div id="tuesday"></div> 
$1 -> <div id="monday"></div>
$2 -> <div id="sunday"></div>

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

angular.element($0).scope()
Вуаля, вы получили доступ в область узла через консоль.

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

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

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

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

скриншот инструментов разработчика Chrome

<Н2>Это кром'с намеком, чтобы сказать вам, что если вы наберете $0 на консоль, то это будет равносильно, что конкретный элемент.</Н2> Внутренне, хром поддерживает стек, где $0-это избранный элемент, $1-это элемент, который был выбран последним, $2 будет тот, который был выбран до $1 и так далее.

Вот некоторые ее применения:

  • Доступ к DOM-элементов из консоли: $0
  • Доступ к их свойствах из консоли: $0.parentElement
  • Обновление их свойствах из консоли: $1.classList.добавить(...)
  • Обновление CSS элементы из консоли: $0.стили.свойство backgroundColor=то"Аква" по
  • Инициирующие события CSS из консоли: $0.нажмите кнопку()
  • И много более сложных продуктов, таких как: $0.метода appendChild(документ.метод createElement (на"див" - а))

<Н3>посмотреть все это в действии:</Н3>

Введите описание изображения здесь

<Н3>поддержка заявление:</Н3> Да, я согласен, есть более эффективные способы, чтобы выполнить эти действия, но эта функция может выйти полезны в некоторых запутанных сценариях, как когда DOM-элемент должен быть нажата, но это не возможно, чтобы сделать это с помощью пользовательского интерфейса, потому что он транслируется на другие элементы или, по какой-то причине не отображается на UI, на тот момент.

Я говорю, что это 's просто сокращенный синтаксис для получить ссылку на HTML-элемент, во время отладки , как правило, эти задачи будут выполнять эти способ

document.getElementById , document.getElementsByClassName , document.querySelector

Итак, нажав на HTML-элемент и получаете ссылку на переменную ($0) в консоли-это огромная экономия времени в течение дня