<MyRusakov.ru />

Создание крупного проекта на Java с нуля

Создание крупного проекта на Java с нуля

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

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

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

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

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

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

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

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

Каким движком Вы предпочитаете пользоваться?

Метод querySelectorAll в JavaScript

Метод querySelectorAll в JavaScript

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

Функция querySelectorAll возвращает все, что соответствует переданному ей css селектору:

 let elements = document.querySelectorAll("CSS селектор");

За исключением числа возвращаемых элементов, все, что я описывал в отношении querySelector в предыдущей статье, также относится и к querySelectorAll . Запомните лишь то, что  данная функция не возвращает один элемент - вместо этого возвращается массив элементов!

Используя уже известный пример HTML кода из прошлой статьи, если мы хотим использовать querySelectorAll, чтобы отобразить атрибут src для всех элементов img , у которых значение класса img-src, нужно сделать следующее:

 let images = document.querySelectorAll(".img-src");

  for (let i = 0; i < images.length; i++)
  {
   let image = images[i];
   alert(image.getAttribute(src));
  }

Смотрите, как просто. Единственное, что вам нужно- это помнить, как работать с массивами в JavaScript.

Фишка  querySelector и querySelectorAll, состоит в том, что они фактически используют весь диапазон вариантов синтаксиса селекторов CSS в качестве аргумента.

Если вы хотите получить все элементы img без указания значения класса, вот как можно это сделать с помощью querySelectorAll:

  let images = document.querySelectorAll("img");

Если вы хотите выбрать только изображение, чей атрибут src установлен на meh.png , вы можете сделать следующее:

  let images = document.querySelectorAll("img[src='meh.png']");

Обратите внимание, что в качестве аргумента querySelectorAll  я просто определил селектор атрибутов. Практически любое сложное выражение, которое вы можете указать для селектора в файле CSS стилей, является справедливым и для указания в качестве аргумента либо для querySelector, либо  для querySelectorAll.

Однако есть некоторые ограничения, о которых вы должны знать:

  1. Не все селекторы псевдокласса допускаются. Селекторы, состоящие из  :visited или :link , игнорируется и, соответственно, элементы не будут найдены.
  2. Как далеко вы сможете продвинуться в использовании выбранных вами селекторов, зависит от поддержки той или иной особенности CSS браузером.  Internet Explorer 8 поддерживает querySelector и querySelectorAll . Но он не поддерживает CSS3. Учитывая это, использование новшеств, предоставляемых CSS3, не будет иметь никакого эффекта.
  3. Указанный вами селектор применяется только к потомкам элемента, с которого вы начинаете поиск. Сам исходный элемент в итоговый результат включен не будет.

Таким образом, функции querySelector и querySelectorAll чрезвычайно полезны в ситуациях, где выборка определенного элемента часто является сложной задачей. Если мне нужны все элементы изображения, я могу просто написать querySelectorAll("img").Если мне нужен только непосредственный элемент img, содержащийся внутри его родительского div , я могу написать  querySelector ("div + img").

А как насчет getElementById, getElementsByTagName, getElementsByClassName?

В прошлом, для выборки элементов страницы использовались функции getElementById , getElementsByTagName и getElementsByClassName. И, несмотря на то, что Вы все еще можете видеть эти функции в старых книгах, учебниках и статьях, вы должны просто использовать querySelector и querySelectorAll.  Эти две функции проще в использовании и намного мощнее, чем то, что вы можете сделать с функциями getElement*

Как однажды сказал мудрый человек, жизнь слишком коротка, чтобы тратить время на изучение старых функций JavaScript.

На этом все, всего доброго!

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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