Javascript поиск по классу

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

Поиск по id

Если в коде страницы элементу задан атрибут id , то элемент можно найти по >getElementById() глобального объекта document.

id — id элемента, который нужно найти. id — это строка, поэтому она должна быть в кавычках.

Создадим страницу, добавим на неё элемент и зададим ему id , а в скрипте найдём этот элемент:

Найденный элемент мы присвоили переменной block и вывели переменную в консоль. Откройте консоль браузера, в ней должен быть указан элемент.

Так как посик по >id , даже если он не был установлен ранее. И находят элемент по id.

Поиск по классу

Метод getElementsByClassName() позволяет найти все элементы, относящиеся к определённому классу.

класс — класс элементов, которые нужно найти

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

Добавим на страницу элементы и зададим им класс. Часть элементов разместим внутри блока, который мы создали ранее. Другую часть создадим вне блока. Смысл этого будет понятен чуть позднее. Теперь страница будет выглядеть так:

В строке 17 мы вывели в консоль весь массив, чтобы посмотреть, сколько в нём элементов, а в строке 18 мы обратились к конкретному элементу.

Метод getElementsByClassName() можно применить не только ко всему документу, но и к конкретному элементу, например, к блоку, который есть на нашей странице. При этом будут найдены не все элементы определённого класса, а только те, которые находятся внутри блока. Найдём элементы класса art , находящиеся в блоке. Блок находится в переменной block. Через неё обратимся к блоку и произведём поиск элементов:

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

Поиск по тэгу

Метод getElementsByTagName() находит все элементы с конкретным тэгом. Он также возвращает псевдомассив с найденными элементами.

тэг — тэг элементов, которые нужно найти

Найдём все тэги p , которые есть на странице:

Этот метод можно также применять не ко всему документу, а к конкретному элементу. Найдите все тэги p , находящиеся в блоке.

Поиск по селектору

Существуют методы querySelector() и querySelectorAll() , которые находят элементы соответсвующие определённому селектору. То есть, будут найдены элементы, к которым был бы применён стиль, если бы он был указан такому селектору. При этом, наличие такого селектора в стиле страницы совсем не обязательно. Эти методы никак не связаны с CSS. Метод querySelectorAll() находит все элементы, соответствующие селектору. А метод querySelector() находит один элемент, который является первым в коде страницы. Эти методы могут заменить все способы поиска элементов, рассмотренные ранее, ведь есть селектор по id, селектор по тэгу и многие другие.

Селекторы пишутся точно так же, как в CSS, только не забывайте ставить кавычки.

Добавим на страницу список и найдём его по селектору. Мы ищем только один элемент и мы точно знаем, что он будет первый, потому что он один на странице. Поэтому в данном случае удобнее использовать метод querySelector() . Но при использовании этого метода нужно учитывать, что в дальнейшем на страницу могут быть добавлены такие же элементы. Впрочем, это касается большинства методов.

Теперь найдём не сам список, а его пункты. Для поиска элементов можно использовать любые селекторы. Мы используем составной селектор:

Данные методы также могут искать элементы не во всём документе, а внутри конеретного элемента.

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

Соседние элементы

Для найденного элемента можно найти соседей. Каждый элемент является объектом, и соседние элементы можно получить через свойства этого объекта. Свойство previousElementSibling содкржит предыдущий элемент, а свойство nextElementSibling содержит следующий элемент.

Найдём элемент, следующий за блоком:

Свойства previousSibling и nextSibling тоже содержат соседей, но они учитывают не только элементы, но и другие узлы.

Перед первым абзацем идёт текст "Блок с id". Найдём этот текстовый узел. Абзац содержится в нескольких псевдомассивах, созданных нами в примерах, в том числе, в массиве art. Обратимся к нему через этот массив:

Дочерние элементы

Свойство children содержит массив с дочерними элементами.

Найдём дочерние элементы блока:

Свойство childNodes содержит не только элементы, но и другие узлы. Найдём все узлы, которые находятся в блоке:

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

1. Как правильно получить элементы по классу item , которые находятся в определенном контейнере? Вариант ниже не сработал.

2. При получение элементов по классу — возвращается коллекция. Как получить первый элемент коллекции? Попытался обратиться как к массиву, но вариант не сработал.

• Вопрос задан более года назад
• 1187 просмотров

Метод querySelectorAll() есть и у документа и у элемента. Так что можно сначала получить элемент, внутри которого искать, а затем внутри него собрать коллекцию:

.getElementsByClassName — всегда возвращает коллекцию, даже если элемент один.

Чтобы заработал Ваш пример должно быть так:

Выберет первый элемент с классом .list и найдет в нем четвертый элемент с классом .item

Всем доброго понедельника.

Статья, показывающая работу со свойствами элемента посредством JavaScript, должна была показать (я надаюсь на это) всю лёгкость манипулирования стилями. Там же говорилось о том, что стили применяются к конкретному элементу. А как его получить?

В JS существует несколько медотов, с помощью которых программисту предоставляется возможность получать выборки элементов. Речь идёт о группах getElement* и querySelector*.

Браузеры предоставляют следующие методы:

• getElementById — выборка одного элемента по его идентификатору (атрибут id );
• getElementsByClassName — поиск элементов по имени класса (атрибут class );
• getElementsByName — возвращает все элементы с указанным именем (атрибут name );
• getElementsByTagName — поиск группы элементов по тегу (названию);
• querySelector — выборка первого элемента по селекторам (имеются ввиду CSS селекторы);
• querySelectorAll — похоже на предыдущий, но возвращает все элементы, попадающие под условие.

Прежде всего, условимся с html кодом, на примере которого будем отрабатывать навыки. Это будет небольшая матрёшка из контейнеров div .

getElementById

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

После этого elem будет содержать ссылку на элемент с идентификатором #go (у нас это

Важно! Атрибут id должен быть уникальным для всей страницы. Если вы решите присвоить двум элементам одинаковый идентификатор, фунция всё равно вернёт 1 элемент. Какой? Зависит от многих факторов. Ключевой момент — вы не можете быть уверены, что получите определённый объект. Поэтому примите за правило: id обязан быть уникальным.

Метод применим только к объекту document . Просто запомните вызов метода: document.getElementById(id) .

getElementsByClassName

Возвращает группу элементов (поэтому и Elements), в которых присутствует искомый класс. Отличительная особенность от предыдущего метода — дозволено указать элемент, относительно которого начинать поиск. Это может быть и document — выбирать элементы на всей странице, либо указатель на определённый блок. Например, получим все элементы с классом .da внутри контейнера #go .

После выполнения кода в массиве elems будут содержаться 3 элемента: .one, .two и .three.

Если же требуется получить всё на странице, достаточно сделать так:

К трём элементам выше добавится ещё один — #go (как видно из кода, ему тоже присвоен класс .da ).

К сожалению, данный метод не поддерживается в Internet Explorer версии 8 и ниже. Это значит, что все обладатели Windows XP оказываются в пролёте. Можно сделать свою реализацию функции, которая оббежит все теги на странице и отберёт лишь те, className которых соответствует условию, но есть более удобные методы для работы.

getElementsByName

Метод возвращает элементы, у которых атрибут name соответствует заданному имени.

Переменная elems после выполнения будет содержать 1 элемент со ссылкой на div.one (ему присвоено имя none ).

Увы, и здесь не обошлось без ложки дёгтя. IE старых версий возвращает лишь те элементы, для которых атрибут name определён спецификацией, например: input, a. Приведённый код ничего не найдёт.

getElementsByTagName

Ищет элементы по имени тега. Метод применяться как к document, так и к конкретному элементу.

Вернёт массив из трёх элементов: .one, .two, .three.

Для выборок используется редко. Наиболее частое применение — добавление нового элемента в цепочку. Пример ниже добавит элемент div.zero перед текстом one.

Ещё одна интересная особенность — если вместо названия тега указать звёздочку *, поиск производится по всем тегам.

Будут возвращены все теги на странице.

querySelector

Вот мы и подошли к серьёзным методам.

querySelector возвращает первый элемент, соответствующий условию.

Код вернёт ссылку на div.one . Про селекторы мы уже говорили, ссылка на статью в начале.

Может возникнуть вопрос, в чём преимущество данной функции? Если элемент имеет уникальный идентификатор, быстрее (и правильнее) воспользоваться document.getElementById(id) . Но в html такое встречается нечасто. Поэтому, для матрёшек удобнее указывать привычную цепочку селекторов.

querySelectorAll

Последний метод, но не по значению. Всего одним запросом вы получаете целую пачку элементов, расположенных в разных блоках, принадлежащие определённому классу и т. п.

Вернёт 2 элемента: .one и .two . Метод примечателен тем, что отсеивает дубли — можно не беспокоиться, что в результирующую выборку будут включены элементы, соответствующие каждой цепочке селекторов. Например:

Будет содержать 3 элемента: .one , .two и .three , а не 4, как можно было подумать (из-за второго правила .one ).

Оба метода querySelector* применимы не только к document , но и к конкретному элементу. В некоторых ситуациях это очень удобно.

Было бы просто свинством, если я, рассказав про выборки, не привёл бы пример их использования. Единичные элементы, возвращаемые с помощью getElementById или querySelector , уже являются ссылкой и готовы к дальнейшим манипуляциям. Остальные выборки возвращают массивы. Но это не такая большая проблема, как может показаться; просто пробежим по всем элементам и каждому присвоим нужное свойство. Пусть это будет что-то совсем простое — сделать цвет текста красным.

Вот и всё. Теперь и вы, уважаемый читатель, познали дзэн и способны делать удивительные вещи.