Jquery количество элементов: jquery — Количество элементов с одинаковым классом

2 years ago

280 views

Как создать селекторы jQuery для WalkMe

Последнее обновление 5 июля 2022 г.

Что такое селектор jQuery?

jQuery — это метод, который вы можете использовать для выбора элементов на экране, когда вы не можете легко сделать это с помощью стандартного инструмента WalkMe.

Когда вы загружаете веб-страницу, все, что вы видите, написано в HTML, языке разметки веб-сайта. Селектор jQuery будет нацелен на определенный элемент в этом HTML-коде. Большинство этих селекторов будут нацелены либо на атрибут класса (общий идентификатор), либо на атрибут идентификатора (конкретный идентификатор) элемента.

Селекторы jQuery сообщают WalkMe, где на странице ему нужно сфокусироваться, будь то расположение контента, триггеры или сегментация. Проще говоря, если WalkMe не может быстро и последовательно найти нужный элемент, используйте jQuery.

Есть несколько способов узнать, когда возникнет проблема с элементом. Если вы выбираете элемент для нового шага, щелкаете по нему, и ничего не происходит, это означает, что WalkMe не может прочитать элемент. Если вы выполняете шаг, и он указывает на неправильный элемент, вам может потребоваться использовать jQuery (но сначала проверьте вкладку точности!). Если ваш Launcher или SmartTip не появляются после выбора его элемента, вам может понадобиться jQuery. Если ваш Launcher, SmartTip или шаг воспроизводится только иногда, но не каждый раз, когда это предполагается, вам может понадобиться jQuery.

Хотя понимание HTML может ускорить и упростить изучение создания селекторов jQuery в WalkMe, для этого не требуется подробного понимания HTML. Очень редко вам придется писать что-то оригинальное или создавать длинные сложные селекторы. Вы почти всегда можете найти именно то, что ищете в HTML, а затем просто скопировать и вставить его в правильном формате. Большая часть jQuery вращается вокруг знания того, что можно извлечь из кода веб-сайта, и именно этому мы здесь, чтобы научить вас!

Прежде чем мы начнем, вот список некоторых ключевых терминов, которые помогут вам сориентироваться:

• HTML: язык разметки, на основе которого создаются веб-сайты
• Элемент: фрагменты HTML, из которых состоит веб-сайт. Думайте о них как о строительных блоках
.
• jQuery: язык кодирования, который выполняет поиск и описание (запросы) HTML
• Селектор: строка кода jQuery, которая описывает элемент HTML, который вы хотите выбрать

Примечание по форматированию: в этой статье элементы HTML выделены жирным шрифтом, а селекторы jQuery выделены курсивом.

Создание селектора jQuery

Создание селектора jQuery состоит из четырех шагов:

1. Определите элемент на веб-странице, к которому вы хотите прикрепить содержимое WalkMe.
2. Создайте селектор jQuery для этого элемента, который позволит WalkMe подключаться к нему.
3. Проверьте селектор, чтобы убедиться, что он имеет правильный формат
4. Подключите этот селектор к редактору WalkMe

Шаг 1. Идентификация элемента

Для начала откройте новую вкладку в браузере и перейдите на сайт www.support.walkme.com. Давайте найдем селектор jQuery для текста «Добро пожаловать в службу поддержки WalkMe» в середине страницы.

Щелкните правой кнопкой мыши «Добро пожаловать в поддержку WalkMe», как показано на изображении 1, и проверьте элемент, нажав либо «Проверить», если вы используете Chrome или Safari, либо «Проверить элемент», если вы используете Firefox или Internet Explorer.

Ваша страница должна выглядеть так:

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

Щелкнув по этому значку курсора, наведите указатель мыши на любой элемент на веб-странице. Это прокрутит вас до точного места в HTML-коде консоли, где находится элемент, и выделит этот элемент светло-голубым цветом. Если щелкнуть элемент на веб-странице, консоль выделит его строку HTML темно-синим цветом и привяжет к этой точке. Это самый простой способ найти элементы в HTML. В консоли разработчика вы можете видеть, что выбрана строка, начинающаяся с «

». Когда вы наводите курсор на строку HTML, связанное с ней содержимое будет выделено. В этом примере [Изображение 3], если вы наведете указатель мыши на текст «

», текст «Добро пожаловать в службу поддержки WalkMe» будет выделен.

Шаг 2. Создание селектора jQuery для желаемого элемента

HTML-элементы

Элементы — это элементы сайта, для выбора которых используется jQuery. Некоторые из них включают кнопки, div, h3, input и iframe. Эти элементы составляют всю страницу и являются ядром веб-сайта.

Вот несколько распространенных типов элементов:

• div: сокращение от разделителя, это строительный блок веб-сайта. Думайте о сайтах как о наборе прямоугольных блоков, содержащих все остальные элементы.
• а: ссылка на другой сайт
• h3: достаточно большой заголовок, меньше, чем h2, но больше, чем h4.
• р: абзац. Они разбивают большие фрагменты HTML и упрощают чтение и навигацию.
Форма
• : как и div, это строительный блок сайта. Однако формы обычно содержат редактируемые элементы, такие как поля ввода 90 020.
• ввод: часть сайта, с которой пользователь может взаимодействовать или изменять, например, текстовое поле или флажок
• img: изображение. Это должно быть довольно понятно!
  Дескрипторы, такие как классы, идентификаторы и атрибуты, определяют, как выглядят эти элементы и как они ведут себя на странице. При написании jQuery элементы всегда должны предшествовать любым дескрипторам. Это означает, что вы никогда не должны помещать какой-либо символ перед элементом.

Важно знать, что вам не всегда нужно включать элемент, который вы выбираете, в свой селектор jQuery, они просто полезны для ориентации в HTML. В этом примере мы сосредоточимся на заголовке страницы, которую мы нашли с помощью инспектора:

.

Как видно из этой строки HTML, описываемый нами элемент — это h3. Это сокращение от «заголовок 2». Цифра 2 указывает размер шрифта заголовка. Элемент h5 будет иметь крошечный шрифт, а элемент h2 будет большим . Как видите, h3 — довольно большой элемент заголовка.

Как найти класс элемента

Классы являются наиболее распространенными дескрипторами элементов. Они могут описывать различные типы элементов, которые имеют одинаковое назначение или находятся в одной и той же части страницы. Они записываются в HTML как [class=»XXX»] или . Это облегчает их поиск и является одной из причин, почему они так популярны. Классы также имеют тенденцию прояснять, что делает элемент.

Давайте рассмотрим нашу строку

. Тип элемента, который мы ищем, — это h3. Его класс — «site-header__title». Просто взглянув на эту строку, мы можем сказать, что искомый элемент h3 является заголовком или заголовком сайта. Даже не глядя на сайт, можно предположить, что элемент довольно крупный и расположен в центре.

Помните, нам не нужно включать тип элемента в jQuery? Давайте придерживаться этого и просто использовать .site-header__title в качестве нашего селектора jQuery для этого раздела. Теперь, когда вы определились с селектором, вы можете использовать его для определения элемента для шага, средства запуска, подсказки SmartTip или любого другого элемента содержимого WalkMe.

Этот шаг теперь будет указывать на логотип поддержки WalkMe с помощью селектора jQuery:

Как найти идентификатор элемента

Если идентификатор существует, вы захотите использовать его вместо класса. Это связано с тем, что идентификаторы являются более конкретными. Процесс поиска идентификатора элемента аналогичен поиску его класса. В новой вкладке откройте www.support.walkme.com, щелкните правой кнопкой мыши строку поиска и выберите «Проверить».

Вы должны увидеть это в консоли разработчика:

Мы видим в выбранной строке HTML , что идентификатор равен hkb-search .

Теперь, когда мы нашли атрибут ID элемента, пришло время превратить его в селектор jQuery. Мы знаем это «.» это ярлык для таргетинга на классы; Идентификаторы имеют аналогичный ярлык. Вместо использования «.» мы будем указывать идентификатор с помощью «#». Наш последний селектор jQuery для окна поиска: #hkb-search .

Этот шаг теперь указывает на панель поиска с помощью селектора jQuery:

Как найти элемент внутри iFrame

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

{ "Элемент" : "#Yourelement" , " : " IFRAMER #RAMERELECTER#IFRAMER #RAMERELECTER#IFRAMER #RAMERELETER#IFRAMER #RAMERELETER#IFRAMERELETER#IFRAMER #RAMERELETER#IFRAMERELETER#IFRAMERELETER #IFRAMERELECTER .

Пример : {"элемент": " h3.mainTitle ", "контекст": " iframe#Main "}

Шаблон wmjQuery ниже:

wmjQuery( "#yourElement" ,wmjQuery( "iframe#iframeselector" ). contents())

Чтобы узнать больше об iFrame iQuery, ознакомьтесь с этим советом. работает так, как мы ожидаем.

1. Убедитесь, что редактор WalkMe открыт и подключен к браузеру. Это гарантирует, что WalkMe находится на странице, на которой вы ищете свой селектор jQuery.
2. Щелкните правой кнопкой мыши страницу и выберите «Проверить [или проверить элемент]»
3. В верхней части открывшегося ящика нажмите «Консоль»:
   
4. Введите wmjQuery('ваш селектор') в командной строке, заменив селектор созданным вами селектором jQuery, но сохранив одинарные кавычки. Чтобы продолжить наш пример, мы должны ввести wmjQuery ( ‘.site-header__title’ ). После того, как вы ввели свою команду в консоли, нажмите Enter.
   Тестирование нашего .site-header__title Селектор будет выглядеть так:
   

Что означают результаты после нажатия Enter?

Сначала разверните результаты, щелкнув стрелку рядом с init . Возвращенная длина — это количество найденных элементов, соответствующих нашему селектору.

• Если он возвращает length: 0, то ему не удалось найти элемент, соответствующий этому селектору.
• Если указано значение length: 1, это хорошая новость, так как этому селектору соответствует только один элемент.
• Если он возвращает длину больше 1, он обнаружил несколько элементов (т. е.> 1), которые соответствуют этому селектору. При любом результате выше 1 мы хотели бы попробовать сделать селектор более специфичным для
  .

Еще один способ проверить селектор jQuery — навести курсор или щелкнуть результат в консоли, чтобы убедиться, что он захватывает правильный элемент на странице.

Здесь мы наводим курсор на 0: h3:site-header__title . Мы видим, что текст «Добро пожаловать в службу поддержки WalkMe» выделен. Это показывает, что наш jQuery правильно указывает на элемент, который мы пытаемся идентифицировать.

Совет jQuery Pro: при использовании селекторов jQuery в механизме правил (например, правил ShoutOut и Auto Play) вы сможете увидеть, найден ли ваш селектор jQuery на текущей странице. Это будет показано с зеленой галочкой [видно на изображении 12], тогда как, если ее невозможно найти, будет красный восклицательный знак. Флажок обновляется в режиме реального времени по мере того, как вы обновляете свой селектор.

Это отлично подходит для устранения неполадок с неисправными селекторами.

Если у вас есть длинный селектор, такой как div.ht-container form.hkb-site-serch (неверный), который возвращается как false (!) в механизме правил, вы можете разобрать его, чтобы увидеть, какая часть вызывает ошибку. проблема.

Вы должны начать с ввода div в текстовое поле jQuery Rule Engine. Если он возвращается с галочкой, вы знаете, что все в порядке. Затем вы должны добавить .ht-container для результата div. ht-container . Этот элемент HTML существует и написан правильно. Затем вы должны добавить form , в результате чего Selector div.ht-container форма. Форма является дочерней *** div.ht-container , так что это допустимый селектор. Галочка все еще там!

Теперь давайте добавим последнюю часть нашего селектора: .hkb-site-serch . Если вы посмотрите на выделенную строку, то увидите, что .hkb-site-serch — это класс, написанный неправильно. Когда мы добавим его в конец
нашего правильно написанного div.ht-container форма зеленая галочка превратится в красный восклицательный знак. Следовательно, мы знаем, что .hkb-site-serch — это часть jQuery, которая разрушает наш селектор
. При ближайшем рассмотрении мы можем найти опечатку (поиск), и исправить ее в поиске. Как только мы исправим опечатку для нового селектора div.ht-container form.hkb-site-search, восклицательный знак превратится в галочку. Мы успешно устранили неполадки и исправили наш селектор!

Шаг 4. Реализация селектора

Теперь, когда мы протестировали Selector, мы можем добавить его в редактор WalkMe, выполнив следующие шаги:

1. Откройте Smart WalkThru, содержащую шаг, который мы хотим отредактировать.
2. Нажмите на шаг
3. Нажмите на вкладку точности
4. Выберите «Селектор jQuery»
5. Вставьте созданный нами jQuery
6. Нажмите Сохранить
7. Нажмите Play на этом шаге и убедитесь, что он работает правильно!

Если вы используете jQuery для Launcher или SmartTip вместо шага Smart WalkThru, просто откройте этот Launcher или SmartTip и перейдите к пункту 3.

Кроме того, селектор jQuery можно добавить в любой набор правил, в котором есть параметр селектора jQuery.

Например, если мы хотим сделать автовоспроизведение ShoutOut, когда виден текст «Добро пожаловать в поддержку WalkMe», это будет выглядеть так: случаи, когда вам нужно применить селекторы jQuery. Однако могут быть некоторые сценарии, в которых вам нужно ориентироваться на что-то помимо атрибута класса или идентификатора.

Продвинутое обучение с помощью jQuery

В первой статье мы узнали, как создавать базовые селекторы jQuery, ориентируясь на атрибут класса или идентификатора элемента. Однако элемент не всегда будет иметь атрибут Class или ID. В этой статье мы узнаем, как ориентироваться на другие атрибуты элемента без использования файла . или #.

Что делать, если у моего элемента нет класса или идентификатора?

Если элемент, который вы хотите выбрать, не имеет класса или идентификатора, который вы можете использовать, не о чем беспокоиться! Мы можем использовать большинство частей HTML как часть нашего селектора jQuery.

Если вы не можете использовать класс или идентификатор для выбора элемента, вы можете использовать любой из других атрибутов элемента. Атрибуты предоставляют дополнительную информацию об элементе. Селектор jQuery
будет иметь формат [Attribute="Value"] .

Во-первых, давайте определим атрибуты элемента.

Здесь, когда мы идентифицируем элемент логотипа WalkMe, мы видим, что элемент не имеет класса или идентификатора для использования. Однако мы видим, что у элемента есть атрибут href со значением https://support.walkme.com. Мы можем использовать этот атрибут для нацеливания на элемент логотипа WalkMe. Допустимым селектором jQuery будет: [href="https://support.walkme.com"] .

Элемент логотипа также имеет другой атрибут, называемый data-ht-sitetitle со значением WalkMe Support. В качестве альтернативы мы могли бы выбрать этот атрибут вместо атрибута href, используя селектор jQuery
: [data-ht-sitetitle="WalkMe Support"] .

Следует помнить об атрибутах, которые не являются идентификатором или классом. Вы всегда должны включать тип элемента перед атрибутом. Это помогает WalkMe нацелить тип элемента на 9.0086 ищите. Атрибуты могут применяться к элементам любого типа, поэтому лучше немного сузить результаты, чтобы ускорить поиск WalkMe. Поэтому, если мы пытаемся выбрать логотип WalkMe с сайта поддержки, мы будем использовать селектор a[href="https://support.walkme.com"] .

Помните, что и — это HTML-код для ссылки. href — это URL-адрес. Это означает, что логотип является ссылкой на страницу поддержки WalkMe!

Шаг, показанный ниже, теперь будет указывать на логотип поддержки WalkMe с помощью href Селектор атрибутов:

Вы можете заметить, что идентификаторы и классы имеют тот же формат, что и атрибуты. Это потому, что идентификаторы и классы тоже являются атрибутами! Использование [class=" CLASS NAME "] и [id=" ID NAME "] позволит вам настроить таргетинг на эти элементы, однако этот формат более утомителен. Мы рекомендуем вам использовать ярлыки, которые мы обсуждали ранее, чтобы сэкономить время.

Как использовать родительские дочерние элементы в jQuery

Допустим, мы хотим использовать селектор без типа элемента. На https://support.walkme.com откройте консоль разработчика и введите следующее:

wmjQuery('[href="https://support.walkme.com"]')

Просмотрите результаты и обратите внимание на длину, которую он возвращает. В этом примере у вас должна быть возвращенная длина 2:

Попробуйте навести указатель мыши на результаты, чтобы увидеть, какие элементы находит селектор. Вы увидите, что этот селектор jQuery нацелен как на логотип WalkMe, так и на текст «Home». Если бы мы хотели настроить таргетинг на текст «Дом», этот селектор не сработал бы, поскольку сначала он находит логотип WalkMe.

Как сделать его более конкретным? Мы могли бы добавить тип элемента Home text, a . Однако это не сработает, потому что логотип тоже и . Добавление к перед href все равно вернет
длиной 2, потому что есть 2 элемента, которые соответствуют селектору jQuery.

Давайте попробуем что-нибудь новое. В HTML есть удобный способ кодирования, который называется родительским дочерним элементом. Вы, возможно, заметили, что в HTML есть строки HTML, которые можно развернуть, чтобы под ними отображалось больше HTML-кода. Когда вы расширяете элемент, расширенный элемент является родительским, а код, который появляется под ним, содержит его дочерние элементы.

Здесь вы можете видеть, что div с классом ht-sitecontainer является родительским элементом всех элементов под ним, таких как div с классом site-header . Если мы посмотрим дальше по дереву HTML, то увидим, что div с классом ht-container является родителем div с классом site-logo, но div с классом ht-container будет дочерним. элемента заголовка
над ним.

jQuery Pro Совет: обычно по мере продвижения вниз по дереву HTML элементы становятся более конкретными. Точно так же, если вы поднимаетесь по цепочке, вы будете находить все более и более крупные элементы, охватывающие более
конкретных элементов. Если вы хотите найти более конкретный элемент, попробуйте спуститься по дереву, а если вы хотите найти элемент, содержащий элемент, попробуйте подняться по дереву.

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

Если мы посмотрим на HTML-код для логотипа WalkMe и домашнего текста ниже, мы увидим, что элемент логотипа WalkMe является дочерним элементом div с классом site-logo :

Если мы посмотрите на текст Home, мы видим, что это дочерний элемент элемента li с парой атрибутов. Поскольку родители разные, мы можем использовать это в нашем селекторе.

Родительско-дочерние элементы указываются путем помещения пробела между двумя элементами. Родительский элемент li стоит перед пробелом, а дочерний элемент [href="https://support.walkme.com"] следует после пробела.

Если мы сложим это вместе, наш более конкретный jQuery, ориентированный на домашний текст, будет выглядеть так: li [href=’https://support.walkme.com’] . Если мы введем это в команду wmjQuery и посмотрим на результаты ниже, мы увидим, что на этот раз мы возвращаем только один результат для основного текста.

Допустим, мы хотим сузить наш селектор логотипа, используя его отношение Parent Child. Мы знаем, что селектор логотипа равен 9.0029 a[href=’https://support.walkme.com»] . Как мы видели выше, его родителем
является div.site-logo . Следовательно, мы могли бы написать наш селектор логотипа как div.site-logo a[href="https://support.walkme.com"] .

Модификаторы

Модификаторы используются для сужения результатов, возвращаемых селектором. Вы просто добавляете их в конец вашего селектора. Хотя вы можете использовать несколько модификаторов одновременно, старайтесь не использовать более двух. Некоторые часто используемые модификаторы :contains(), :visible, :has() и :eq() .

• h3:содержит(Добро пожаловать в WalkMe):видимый
  • :contains() → выбрать элемент, содержащий символы, указанные в скобках
  • :visible → выберите элемент, видимый пользователю, а не только компьютеру
• .hkb-site-search:has([type="text"])
  • :has() → выберите элемент, который содержит внутри себя другой элемент (указанный в скобках). В этом случае вы выбираете тот, у которого есть элемент с атрибутом ([type="Text"] вложенный внутри
• form.hkb-сайт-поиск ввод:eq(0)
  • :eq() → выберите первый (или тот номер, который вы укажете в скобках) элемент, соответствующий вашему селектору. Важно помнить, что число в круглых скобках индексировано, а это означает, что отсчет начинается с 0. Первый элемент – :eq(0), второй – :eq(1) и так далее.
• form.hkb-сайт-поиск ввод: последний
  • :last → выберите последний элемент, соответствующий вашему селектору. Это работает аналогично :eq() . Вы также можете использовать :first , чтобы выбрать первый элемент, соответствующий вашему селектору
    .

Динамические идентификаторы

Есть одна ловушка, на которую вам следует обратить внимание при написании селекторов jQuery: динамические идентификаторы. Обычно они состоят из длинных цепочек чисел, за которыми следует одно или два слова или которым предшествует это слово. Старайтесь не использовать их для идентификации вашего элемента, так как строка чисел изменится при обновлении. Это означает, что как только страница обновится, идентификатор изменится, и ваш селектор jQuery больше не будет работать. Чтобы этого не произошло, вам следует найти другой селектор для элементов с динамическими идентификаторами. Например, если вы пытаетесь выбрать td с указанным ниже динамическим идентификатором, вы можете использовать .dataCol.inlineEditWrite или .labelCol:contains(факторы сложности) + td. Однако не следует использовать td#00N00000067211_ilecell. Это динамический идентификатор, который изменится:

Если вам абсолютно необходимо использовать динамический идентификатор для идентификации элемента, вы должны использовать только его часть, которая не изменяется. Это потребует некоторых догадок, но обычно вы должны попытаться найти слово или строку текста, которая выглядит как английский язык. В этом случае использование «ilecell», вероятно, будет беспроигрышным вариантом. Чтобы превратить эту часть динамического идентификатора в селектор, используйте частичный формат, который мы обсуждали выше, в разделе частичного атрибута. Если полный идентификатор записан как [id=”00N00000067211_ilecell”] , частичный селектор будет выглядеть так: [id*="ilecell"] . Здесь мы записываем идентификатор в том же формате, который используем для других атрибутов (помните, идентификаторы — это просто часто используемые атрибуты). Добавляя * после идентификатора, мы говорим WalkMe искать идентификатор, который содержит «ilecell» .

Теперь мы записали частичный атрибут для этого динамического идентификатора. Это более безопасная и надежная альтернатива использованию полного динамического идентификатора. Однако, в то время как [id*="ilecell"] , вероятно, последовательно выберет нужный нам элемент, он может выбрать другие, которые нам не нужны. Удалив динамическую часть идентификатора, мы сократили селектор до довольно общего атрибута, который, вероятно, описывает другие поля 9.0086 на этом сайте. Поэтому вы должны подключить этот частичный атрибут к более крупному селектору jQuery. Давайте воспользуемся одним из приведенных выше. Если мы хотим добавить наш частичный атрибут к .dataCol.inlineEditWrite , мы можем заменить его на один из двух классов, создав [id*="ilecell"].inlineEditWrite . Мы также можем просто добавить его в конец: .dataCol.inlineEditWrite[id*="ilecell"] .

Эквивалент селекторов jQuery в чистом Javascript

Нативный Javascript имеет большое значение в веб-анимации

В обычных повседневных задачах вы можете обойтись без jQuery. Но веб-анимации — они очень ориентированы на производительность. Разработчик, который делает анимацию гладкой, проделал действительно тяжелую работу. Чем сложнее становится анимация, тем больше ей требуется кода, ориентированного на производительность. Встроенный Javascript определенно повышает производительность анимации.

В вашем приложении вы можете писать AJAX, проверки форм и все такое в jQuery. А вот часть кода, связанная с анимацией — рекомендуется использовать чистый Javascript.

В этом посте обсуждаются селекторы — как можно выбирать элементы на чистом Javascript.

Функции, основанные на селекторах CSS

• document.querySelectorAll : этот метод возвращает все элементы в документе, соответствующие указанному селектору CSS. Возвращается массив, подобный коллекции, и каждый элемент в нем является элементом HTML DOM (div, кнопка, диапазон и т. д.). Поскольку это массив, вы можете перебрать его, используя цикл for.
• document.querySelector : этот метод возвращает первый элемент, соответствующий указанному селектору CSS. Он возвращает только один элемент HTML.

Как и jQuery, эти функции принимают селектор в качестве параметра и возвращают соответствующие элементы. Разница в том, что эти функции ожидают допустимые селекторы CSS, тогда как jQuery имеет несколько дополнительных настраиваемых селекторов, также (например, :selected не является допустимым селектором CSS, но работает с jQuery).

Просмотрите справочник по селекторам CSS, чтобы понять разницу между селекторами jQuery и селекторами CSS. Они почти одинаковы.

• Выбор по идентификатору :

   // jQuery
  $("#элемент")
   

   // Чистый JS: выбор по идентификатору вернет только один элемент
  // Поэтому мы используем document.querySelector (вместо document. querySelectorAll)
  document.querySelector("#элемент")
   

• Выбор по классу :

   
  Раунд 1
   

   // jQuery
  $(".круглый")
   

   // Чистый JS: выбор по классу может вернуть много элементов
  // Поэтому мы используем document.querySelectorAll (вместо document.querySelector)
  document.querySelectorAll(".round")
  // document.querySelectorAll(".round")[0] относится к первому элементу
  // document.querySelectorAll(".round")[1] ссылается на второй элемент
  // и так далее
   

• Выбор по комбинации идентификатора и класса :

   <дел>
  Внутренний