<MyRusakov.ru />

WordPress 6 с Нуля до Гуру

WordPress 6 с Нуля до Гуру

Этот курс научит Вас созданию самых разных сайтов на самой популярной в мире CMS - WordPress. Вы увидите установку и настройку локального сервера, разбор каждой настройки, каждой кнопки и каждого пункта меню в панели WordPress.

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

Помимо уроков к курсу идут упражнения для закрепления материала.

И, наконец, к курсу идёт ценнейший Бонус по тому, как используя ChatGPT и создавая контент для сайта, можно выйти на пассивный доход. Вы наглядно увидите, как зарегистрироваться в ChatGPT (в том числе, и если Вы из России), как правильно выбрать тему для сайта, как правильно генерировать статьи для него(чтобы они индексировались поисковыми системами) и как правильно монетизировать трафик на сайте.

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Какая тема Вас интересует больше?

Получение элементов по селектору в JS

Получение элементов по селектору в JS

Первое с чем сталкивается JS разработчик при работе с сайтами, так это как получить элементы с веб-страницы. Для написания любой программы, нужно оперировать исходными данными. Для манипуляций с веб-сайтами, такими исходными данными являются все его элементы. Только нам, не нужны все элементы сразу. На этом уроке мы научимся получать нужный нам элемент по селектору.

Существует два метода получения элемента по селектору:

  1. querySelector
  2. querySelectorAll

Когда какой метод использовать, сейчас будем разбираться.

Метод querySelector

Например, вам нужно получить кнопку "Отправить", чтобы повесить на неё событие клика и такая кнопка с этим классом на сайте одна.

// HTML код
<button class="btn_submit" type="submit">Отправить</button>

Метод querySelector находит в документе кнопку с классом .btn_submit и передает её в переменную, которую мы только что создали. Данный метод позволяет получить первый элемент в документе с указанным в параметрах селектором. Здесь как видите, все просто.

//JS код
let submitBtn = document.querySelector('.btn_submit');

А что делать, если на странице присутствуют три заголовка h2 с одинаковым классом или вовсе без класса. Первым делом нужно себя спросить: "Я буду взаимодействовать только с первым заголовком?" Если это так, то вы можете смело использовать метод querySelector.

// HTML код
<h2>Как получить элемент по id</h2>
<h2>Как получить элемент по классу</h2>
<h2>Как получить элемент по тегу</h2>

//JS код
let firstHeading = document.querySelector('h2');
console.log(firstHeading);

В переменную firstHeading попал только первый заголовок, что легко проверяется при выводе в консоль. Однако, если вам нужен только второй заголовок или все h2 заголовки, тогда следует применять метод querySelectorAll.

Метод querySelectorAll

Как работает метод querySelectorAll, наглядно сейчас увидите на ненумерованных списках.

<ul>
    <li><a href="#">работай с JavaScript</a></li>
    <li><a href="#">изучай JavaScript</a></li>
    <li><a href="#">практикуйся на JavaScript</a></li>
</ul>

// Найдет все ссылки вложенные в теги ul li
let allLinks = document.querySelectorAll('ul li a');
console.log(allLinks); // вернул список всех ссылок

Теперь рассмотрим, как получить только нужные нам элементы: второй, третий и.т.д.

<p>Обратиться по селектору</p>
<p>Обратиться по тегу</p>
<p>Обратиться по классу</p>
<p>Обратиться по идентификатору</p>

Я хочу получить только второй параграф, так и записываем: "Найди и положи в переменную, второй параграф." На конце цифра [1] - это порядковый номер второго параграфа, не забываем, что в программировании отсчет ведется с нуля.

let secondParagraph = document.querySelectorAll('p')[1];
console.log(secondParagraph); // проверяем, что лежит в переменной

Метод querySelectorAll является самым универсальным и подходит для всех случаев. Пожалуй, только в одном случае, целесообразнее использовать querySelector: если получаемый элемент, на странице единственный. Просто querySelector отработает быстрее, чем querySelectorAll, как только он наткнется на заданный элемент, то прекратит работу.

Приведу ещё несколько примеров.

Мы получим список (псевдомассив) всех элементов div с классами example_1 и example_2.

<div class="simple_one"></div>
<div class="example_1"></div>
<div class="simple_two"></div>
<div class="example_2"></div>

let getExamples = document.querySelectorAll('.example_1, .example_2');
console.log(getExamples);

Результат из консоли:

Получение элементов по селектору в JS.

В каком-то смысле появление методов querySelector и querySelectorAll, немного обесценило jQuery. В свое время библиотека jQuery приобрела такую бешеную популярность, отчасти из-за возможности гибкого получения элемента по его селектору, передав в параметрах такую конструкцию ('div.contact h3').

Вы спросите: "А как раньше разработчики JS, обращались к элементам страницы?" Существуют и другие способы, хоть они и менее удобные, но знать их все равно нужно. В интернете всё ещё живет и будет продолжать жить огромное количество сайтов, где можно увидеть эти устаревшие методы:

  1. getElementByID
  2. getElementsByTagName
  3. getElementByClassName

Если вы ещё с ними не знакомы, то почитайте статью: Как получить элементы в JS. В реальном мире веб-разработки, вы неизбежно будете сталкиваться с устаревшими технологиями. Среди заказов на фрилансе, больше половины тех, где заказчик просит что-то улучшить или подправить. Умение получить любой элемент с веб-страницы - нужный навык, но этого мало. Хотите узнать больше: как повесить событие на элемент, сделать его функциональным и много ещё чего полезного? Представляю вашему вниманию: Видеокурс "JavaScript, jQuery и Ajax с Нуля до Гуру"

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.