<MyRusakov.ru />

Программирование на Python с Нуля до Гуру

Программирование на Python с Нуля до Гуру

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

К курсу прилагается множество упражнений и все исходники из уроков.

Наконец, Вы получите ещё несколько бонусов: "Создание калькулятора на Python", "Создание игры на Python" и "Правильная работа со справочником".

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

Подписавшись по 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):

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