May 22nd, 2021

Учебник по JavaScript: 2 часть, нужно знание HTML и CSS, CSS-селекторы

Прочел подраздел 1.4 «Поиск: getElement*, querySelector*» второй части («Браузер: документ, события, интерфейсы») учебника по JavaScript.

Вообще, для изучения JavaScript нужно хотя бы базовое понимание HTML и CSS. Конкретно в этом учебнике авторы изначально и не собираются давать какую-либо информацию по основам HTML и CSS, разве что косвенно, ненароком.

Во время изучения первой части учебника мне хватало базового знания HTML и CSS, но во второй части стало не хватать некоторых отдельных разделов знаний по CSS. Например, при чтении указанного выше подраздела я заметил, что авторы учебника постоянно используют термин «CSS-селектор», но не потрудились его объяснить. Как я понимаю, это потому, что этот термин, в принципе, не относится к JavaScript.

Что такое «CSS-селектор»? Как я понял, это текстовая строка, которая идентифицирует один или сразу несколько элементов HTML-страницы («selector» в переводе на русский значит «выборщик», то есть данный селектор помогает нам выбрать нужные для обработки скриптом элементы HTML-страницы). Как я понимаю, в CSS обсуждаемый селектор используется для выбора нужных элементов HTML-страницы, чтобы обработать эти элементы нужным стилем, а в скрипте на языке JavaScript — чтобы обработать эти элементы в коде.

CSS-селектор задается многим встроенным методам в качестве параметра. В указанном выше подразделе учебника в пример приводятся встроенные методы querySelectorAll, querySelector и другие.

При построении строки CSS-селектора используются определенные правила. Кое-какие подробности есть в этой статье:

https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Selectors

Два примера простых CSS-селекторов:

CSS-селектор по типу элемента HTML-страницы:
"table"

CSS-селектор по типу элемента HTML-страницы и определенному атрибуту этого элемента:
'form[name="search"]'

В принципе, не обязательно самому сочинять строку CSS-селектора, если имеется готовая HTML-страница. В инструменте «Elements» инструментов разработчика браузера (я использую браузер «Microsoft Edge» на движке «Chromium») можно легко получить CSS-селектор нужного элемента. Для этого можно нажать правой кнопкой мыши на нужный элемент HTML-страницы и в открывшемся контекстном меню выбрать пункт «Copy», а в его подменю пункт «Copy selector» (чтобы скопировать строку CSS-селектора) или пункт «Copy JS path» (чтобы получить строку кода на языке JavaScript, нужную для получения самого этого элемента HTML-страницы в виде объекта).