May 21st, 2021

JavaScript: DOM-дерево, консоль разработчика, переменные $0-$4

Только сейчас до меня дошло, что «инструменты разработчика» (по-английски «DevTools») и «консоль разработчика» (по-английски «Console») в браузере (у меня — «Microsoft Edge» на движке «Chromium») — это разные вещи. В процессе чтения первой части учебника по JavaScript я считал их синонимами.

Как оказалось, консоль разработчика — это лишь один из инструментов разработчика. При изучении первой части учебника я пользовался консолью, только чтобы просматривать сообщения о неотловленных (по-английски «uncaught») ошибках при падениях скрипта.

Прочел подраздел 1.2 «DOM-дерево» второй части учебника и увидел там следующую фразу, цитата:

Последний элемент, выбранный во вкладке Elements, доступен в консоли как $0; предыдущий, выбранный до него, как $1 и т.д.


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

Как оказалось, в этом нет ничего сложного. Об этом можно почитать подробнее тут:

https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/console/console-dom-interaction

Количество таких переменных ограничено, их всего пять: $0, $1, $2, $3, $4. После загрузки HTML-страницы значение этих переменных не определено, то есть равно специальному значению undefined. Работают они по принципу стека (стопки).

Рассмотрим их работу подробнее. На открытой HTML-странице открываем инструменты разработчика (F12) и заходим в пункт меню «Elements». Выбрать нужный элемент из DOM-дерева можно, щелкнув по нему левой кнопкой мыши. После этого уже можно использовать переменную $0 в консоли разработчика так, как описано в указанном выше подразделе учебника. Если совершить еще один выбор элемента в DOM-дереве, то предыдущее значение переменной $0 перемещается в переменную $1, а в переменную $0 помещается только что выбранный элемент. При следующем выборе элемента в DOM-дереве происходит тоже самое, только теперь уже задействуются три переменных, начинающихся со знака доллара. И так далее, пока не будут заполнены все пять таких переменных. При следующем, шестом выборе элемента, самый первый выбор «выпадет» из стопки и будет потерян, а в пяти переменных всегда будут оставаться только самые последние пять выбранных элементов.

Чем меньше номер переменной, тем более «свежий» выбранный элемент в ней хранится. В переменной $0 всегда хранится элемент, выбранный только что, самым последним.

В DOM-дереве можно видеть обозначение только самого последнего выбранного элемента: после элемента видно подпись == $0. Остальные переменные в DOM-дереве не видно, даже если они содержат элементы. Именно это меня поначалу сбивало с толку, я думал, что и остальные выбранные элементы должны обозначаться в DOM-дереве похожим образом.