Вы здесь: Главная » JavaScript » Выбор элементов html-страницы с помощью JavaScript

Выбор элементов html-страницы с помощью JavaScript

JavaScript чаще всего работает с уже существующими элементами страницы. При этом эти элементы как-то нужно выбрать. Методы, рассмотренные в данной статье, помогут вам это сделать.При работе с элементами страницы нужно соблюдать 2 условия:

  1. Размещать теги <script></script> вместе с нужным вам кодом после тех элементов html-страницы, которыми он (код) будет манипулировать. В идеале - перед закрывающимся тегом </body>, т.к. именно в нем размещается вся разметка. Если теги <script></script> размещены в блоке <head></head>, то нужно писать код в обработчике события window.onload = function(){} или
  2. Правильно находить элементы и перебирать их, т.к. в большинстве случаев у вас будет не один, а несколько элементов.
  3. Понимать, что коллекции элеметов отличаются от массивов

В этой статье мы рассмотрим такие методы для поиска элементов на странице:

  1. document.getElementById()
  2. document.querySelector()
  3. element.closest()
  4. document.querySelectorAll()
  5. document.getElementsByClassName()
  6. document.getElementsByTagName()

Методы для поиска одного элемента

Оба метода, рассмотренные ниже, возвращают ссылку на html-элемент, который соответствует вашему запросу.

Метод document.getElementById()

Метод document.getElementById('some_id') позволяет найти элемент по его id, который передается в скобках в качестве строкового параметра. Согласно спецификации HTML элемент с таким id на странице должен быть в единственном экземпляре. Если вы нарушили это правило, то HTML-CSS это пропустят  отформатируют несколько элементов одинаково, а вот JavaScript найдет только первый такой элемент и отформатирует только его.

Например, у нас есть такая разметка и css-стили:

Как видно из примера, css-форматирование применилось ко всем 3-м блокам с id="someWrapper", хотя это и противоречит семантике.

Block 1 in someWrapper 1

Block 2 in someWrapper 2

Block 3 in someWrapper 3

Block 1 in someWrapper 1

Block 2 in someWrapper 2

Block 3 in someWrapper 3

Block 1 in someWrapper 1

Block 2 in someWrapper 2

Block 3 in someWrapper 3

Давайте напишем JS-код и применим его при клике на кнопке для нашего примера.

Щелкните на кнопку и посмотрите на внешний вид блоков выше.

JavaScript нашел самый верхний элемент по id="someWrapper" и изменил его фоновый цвет. Вторая строчка сработала даже без использования метода document.getElementById('someWrapper'), т.к. такой id является уникальным для данной страницы. Использовать такой подход к элементу с id="some-wrapper" (some-wrapper.style.fontStyle = 'italic') не получится, т.к. вы получите ошибку вида "Invalid left-hand side in assignment".

Такой подход был давно использован в Internet Explorer, а затем вошел в стандарт HTML 5. Связано такое поведение браузеров с тем, что id объекта становится глобальной переменной window["id"] и может быть вызвано в любом месте кода. С этой точки зрения можно обратиться к элементу с id="some-wrapper" как window["some-wrapper"] - и у вас все получится.

Минусом такого подхода является то, что использование глобальных переменных не приветствуется в JavaScript, т.к. возможна ситуация, когда такая переменная встретится в другом скрипте и будет являться функцией, например. Это может привести к ошибкам. Поэтому стоит все-так воспользоваться методом document.getElementById('some_id') во избежание таких ошибок и для совместимости с более старыми версиями браузеров.

Метод document.querySelector()

Метод document.querySelector('css-selector') позволяет найти первый элемент на странице, соответствующий css-селектору, переданному в качестве параметра. Из названия и характеристики этого метода понятно, что нужно ориентироваться во всем многообразии css-селекторов. Справедливости ради следует заметить, что его можно использовать и для поиска элемента по id или классу (это простые селекторы, которые должны быть известны каждому). В первом случае он будет заменой методу document.getElementById(), во втором - найдет первый элемент с указанным классом.

Рассмотрим пример:

Вот, что получим в результате:

  1. Элемент списка 1
  2. Элемент списка 2
  3. Элемент списка 3
  4. Элемент списка 4
  5. Элемент списка 5
  6. Элемент списка 6
  7. Элемент списка 7

На самом деле все достаточно предсказуемо, если проанализировать, какие именно селекторы мы передали этому методу. Для демонстрации изменений были использованы свойства, позволяющие изменять стилевые свойства из JavaScript.

Примечание: в JavaScript есть ряд объектов, к которым существует индивидуальное обращение:

  • document - главный элемент, из которого мы можем добраться до любых элементов;
  • document.documentElement - это корневой тег нашего документа, т.е. <html>
  • document.body - это основной тег, внутри которого находятся все остальные, с которыми мы потом работаем, т.е. <body>
  • document.head - тег заголовочной части нашего документа, т.е. <head> (есть во всех современных браузерах, кроме IE8 и ниже).

Метод element.closest()

Метод element.closest() предназначен для поиска ближайшего родительского элемента или данного элемента, который соответствует переданному в скобках селектору. Если такой элемент не найдется, вернется null.  Синтаксис:

Т.е. в скобках вы передаете селектор, который соответствует правилам записи селекторов в css.

Учтите, что вернуться может и ссылка на тот элемент, относительно которого мы выполняем поиск, если других соответствий не найдено или вы задали слишком общий селектор, например в виде селектора элемента (span, p, div и т.д.)

Чаще всего метод element.closest() применяется для поиска родительского элемента при обработке события на каком-либо вложенном элементе. Распространенный пример - удаление строки таблицы при оформлении заказа в интернет магазине. Код примера таков:

Обратите внимание, что для подсчета стоимости всех товаров в корзине в функции showPrice() мы использовали метод массивов reduce, предварительно преобразовав коллекцию элементов в массив методом Array.from().

Тестируем пример с корзиной:

Наименование Количество Цена, грн Удалить
Рюкзак школьный Rainbow Girl 1 269
Пенал Smart Power 4x4 1 99
Фломастеры BIC Visa 12 цветов 1 87
Набор шариковых ручек 4 шт BIC 1 32
Итого  

Методы для поиска нескольких элементов

Как правило, на странице есть некоторое количество элементов с одинаковыми классами, названиями тегов (абзацы <p>, например, или <nav>) или последние ячейки в каждой строке таблицы. Манипулировать их css-свойствами желательно прежде всего с помощью стилей, но довольно часто нужно назначать css или обработчики событий динамически и сразу всем однотипным элементам.

Метод document.querySelectorAll()

В отличие от своего брата-метода document.querySelector(), этот метод возвращает набор элементов, который представляет собой коллекцию узлов, и это следует учитывать в коде. Коллекция - это псевдомассив, который позволяет обращаться к каждому элементу по индексу и имеет такое свойство, как length (длина коллекции, или количество html-элементов в ней), но тем не менее, не позволяет использовать методы массивов для своих элементов.

Исключением для метода document.querySelectorAll() является метод forEach(), который поможет вам перебрать элементы коллекции и назначить нужные вам свойства или обработчики событий. Другие методы для поиска нескольких элементов не дают такой возможности, т.к. не имеют метода forEach(). Имейте в виду, что и для document.querySelectorAll() метод forEach() был добавлен относительно недавно, поэтому некоторые не слишком новые версии браузеров могут выдавать ошибку при его использовании.

В примере ниже мы применим метод  document.querySelectorAll() для назначения обработчика события клика, в котором добавим к каждому элементу набора css-свойство animation.

Давайте посмотрим на результат: все работает - по клику блоки исчезают за полсекунды.

Бжж
Бжж
Бжж
Бжж
Бжж

Примечание: метод querySelectorAll() можно применять, обращаясь не только ко всему документу (document), но и к какому-либо элементу, ссылку на который вы сохраняли ранее. В примере с удалением строки таблицы заказа с помощью метода element.closest(), была использована такая запись для поиска всех ячеек таблицы с ценой:

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

Метод document.getElementsByClassName()

Как следует из его названия, метод document.getElementsByClassName('className') возвращает HTML-коллекцию из элементов, имеющих в качестве атрибута переданный в скобках класс. Т.е. у него более узкий спектр выборки, чем у document.querySelectorAll(). Тем не менее, его можно использовать, если вам вполне достаточно выбрать именно элементы одного класса.

В примере ниже мы с помощью метода document.getElementsByClassName('className') выберем все абзацы с классом "example-edit" и сделаем их по событию клика редактируемыми за счет добавления атрибута contenteditable = "true". Кроме того, обработаем событие oninput, которое позволит нам подсчитать и вывести количество символов в каждом абзаце.

Обратите внимание, что здесь мы использовали цикл for(), т.к. метод forEach() для такой выборки применить не удастся.

Проверяем действие скрипта на живом примере:

Lorem ipsum dolor sit amet...

Perferendis adipisci voluptas ...

Quibusdam dolore cum aspernatur,...

Fugiat, a, esse. Laudantium ...

Ipsa ipsam aspernatur vel...

Minus maiores, dolor ne...

Метод document.getElementsByTagName()

Метод document.getElementsByTagName('tagName') предназначен для выбора элеметов по определенному тегу. То есть он дает нам доступ ко всем абзацам, input-ам или section на нашей html-странице.

Давайте посмотрим, сработает ли наш скрипт для строк таблицы:

Данные сотрудников
N п/п Ф.И.О. Должность Email Тел.
1 Кононов Иван Петрович Генеральный директор director@some-company.com (099) 223-44-55
2 Кондрашов Олег Николаевич Финансовый директор finansist@some-company.com (099) 224-44-56
3 Любочкина Ирина Сергеевна Главный бухгалтер glavbuh@some-company.com (099) 224-45-57
4 Смородинова Валентина Эдуардовна Начальник отдела кадров hr@some-company.com (099) 224-46-56
5 Веревкин Константин Степанович Главный менеджер top-manager@some-company.com (099) 224-48-67

Коллекции ссылок, изображений и форм

Для ссылок, изображений и форм есть свои особые коллекции, которые можно использовать параллельно с другими методами, а именно:

  1. document.links - для всех ссылок на странице
  2. document.images - для изображений
  3. document.forms - для форм

При необходимости вы можете обращаться к ним, как к элементам массива, например, доступ к первой ссылке на странице будет выглядеть, как document.links[0], а ко второму изображению, как document.images[1]. Кроме того, к ним можно обращаться по id или по name, например, document.forms['myForm'].

Обратите внимание, что в конце наименования все эти коллекции имеют букву "s", т.е. подразумевается, что на странице может быть несколько ссылок, картинок и форм. И даже, если картинка, ссылка или форма одна, обратится к ней можно только через название коллекции с "s" в конце, например, document.images['pic1'] при наличии в html-разметке строки:

Использование методов массивов для html-коллекций

Как уже упоминалось ранее, html-коллекции - это псевдомассивы, которые имеют нумерованные индексы для каждого элемента, возвращают их количество в свойстве length, но при этом не позволяют перебирать массивы такими методами, как forEach(), map(), reduce(), filter() и т.д.

Тем не менее, мы можем изменить ситуацияю, превратив псевдомассив в массив.

Способ 1. Использование метода call()

Метод call() позволяет вызвать любой из методов массива и передать ему в качестве аргумента нашу коллекцию. Мы уже использовали этот подход для строк таблицы.

Можно попробовать получить номер (индекс) каждой ячейки td в строке tr таблицы (поместите этот код для проверки в функцию, вызываемую по onclick):

Способ 2. Использование метода Array.from()

Метод Array.from() значительно более новый, чем call(), поддерживается только современными браузерами, но имеет простой и понятный синтаксис. Он преобразует псевдомассив в массив таким способом:

После такого преобразования вы можете пользоваться всеми методами массивов для html-коллекций.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *