Получить элемент по классу javascript

Получить элемент по классу javascript

Свойства навигации по DOM хороши, когда элементы расположены рядом. А что, если нет? Как получить произвольный элемент страницы?

Для этого в DOM есть дополнительные методы поиска.

document.getElementById или просто id

Если у элемента есть атрибут id , то мы можем получить его вызовом document.getElementById(id) , где бы он ни находился.

Также есть глобальная переменная с именем, указанным в id :

…Но это только если мы не объявили в JavaScript переменную с таким же именем, иначе она будет иметь приоритет:

Это поведение соответствует стандарту, но поддерживается в основном для совместимости, как осколок далёкого прошлого.

Браузер пытается помочь нам, смешивая пространства имён JS и DOM. Это удобно для простых скриптов, которые находятся прямо в HTML, но, вообще говоря, не очень хорошо. Возможны конфликты имён. Кроме того, при чтении JS-кода, не видя HTML, непонятно, откуда берётся переменная.

В этом учебнике мы будем обращаться к элементам по id в примерах для краткости, когда очевидно, откуда берётся элемент.

В реальной жизни лучше использовать document.getElementById .

Значение id должно быть уникальным. В документе может быть только один элемент с данным id .

Если в документе есть несколько элементов с одинаковым значением id , то поведение методов поиска непредсказуемо. Браузер может вернуть любой из них случайным образом. Поэтому, пожалуйста, придерживайтесь правила сохранения уникальности id .

Метод getElementById можно вызвать только для объекта document . Он осуществляет поиск по id по всему документу.

querySelectorAll

Самый универсальный метод поиска – это elem.querySelectorAll(css) , он возвращает все элементы внутри elem , удовлетворяющие данному CSS-селектору.

Следующий запрос получает все элементы
, которые являются последними потомками в

    :

Этот метод действительно мощный, потому что можно использовать любой CSS-селектор.

Псевдоклассы в CSS-селекторе, в частности :hover и :active , также поддерживаются. Например, document.querySelectorAll(‘:hover’) вернёт коллекцию (в порядке вложенности: от внешнего к внутреннему) из текущих элементов под курсором мыши.

querySelector

Метод elem.querySelector(css) возвращает первый элемент, соответствующий данному CSS-селектору.

Иначе говоря, результат такой же, как при вызове elem.querySelectorAll(css)[0] , но он сначала найдёт все элементы, а потом возьмёт первый, в то время как elem.querySelector найдёт только первый и остановится. Это быстрее, кроме того, его короче писать.

matches

Предыдущие методы искали по DOM.

Читайте также:  Повтор экрана iphone на телевизоре lg

Метод elem.matches(css) ничего не ищет, а проверяет, удовлетворяет ли elem CSS-селектору, и возвращает true или false .

Этот метод удобен, когда мы перебираем элементы (например, в массиве или в чём-то подобном) и пытаемся выбрать те из них, которые нас интересуют.

closest

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

Метод elem.closest(css) ищет ближайшего предка, который соответствует CSS-селектору. Сам элемент также включается в поиск.

Другими словами, метод closest поднимается вверх от элемента и проверяет каждого из родителей. Если он соответствует селектору, поиск прекращается. Метод возвращает либо предка, либо null , если такой элемент не найден.

getElementsBy*

Существуют также другие методы поиска элементов по тегу, классу и так далее.

На данный момент, они скорее исторические, так как querySelector более чем эффективен.

Здесь мы рассмотрим их для полноты картины, также вы можете встретить их в старом коде.

  • elem.getElementsByTagName(tag) ищет элементы с данным тегом и возвращает их коллекцию. Передав "*" вместо тега, можно получить всех потомков.
  • elem.getElementsByClassName(className) возвращает элементы, которые имеют данный CSS-класс.
  • document.getElementsByName(name) возвращает элементы с заданным атрибутом name . Очень редко используется.

Давайте найдём все input в таблице:

Одна из самых частых ошибок начинающих разработчиков (впрочем, иногда и не только) – это забыть букву "s" . То есть пробовать вызывать метод getElementByTagName вместо getElementsByTagName .

Буква "s" отсутствует в названии метода getElementById , так как в данном случае возвращает один элемент. Но getElementsByTagName вернёт список элементов, поэтому "s" обязательна.

Другая распространённая ошибка – написать:

Попытка присвоить значение коллекции, а не элементам внутри неё, не сработает.

Нужно перебрать коллекцию в цикле или получить элемент по номеру и уже ему присваивать значение, например, так:

Ищем элементы с классом .article :

Живые коллекции

Все методы "getElementsBy*" возвращают живую коллекцию. Такие коллекции всегда отражают текущее состояние документа и автоматически обновляются при его изменении.

В приведённом ниже примере есть два скрипта.

    Первый создаёт ссылку на коллекцию

Напротив, querySelectorAll возвращает статическую коллекцию. Это похоже на фиксированный массив элементов.

Если мы будем использовать его в примере выше, то оба скрипта вернут длину коллекции, равную 1 :

Читайте также:  Как сбросить macbook air до заводских настроек

Теперь мы легко видим разницу. Длина статической коллекции не изменилась после появления нового div в документе.

Итого

Есть 6 основных методов поиска элементов в DOM:

Метод Ищет по. Ищет внутри элемента? Возвращает живую коллекцию?
querySelector CSS-selector
querySelectorAll CSS-selector
getElementById id
getElementsByName name
getElementsByTagName tag or ‘*’
getElementsByClassName class

Безусловно, наиболее часто используемыми в настоящее время являются методы querySelector и querySelectorAll , но и методы getElementBy* могут быть полезны в отдельных случаях, а также встречаются в старом коде.

  • Есть метод elem.matches(css) , который проверяет, удовлетворяет ли элемент CSS-селектору.
  • Метод elem.closest(css) ищет ближайшего по иерархии предка, соответствующему данному CSS-селектору. Сам элемент также включён в поиск.

И, напоследок, давайте упомянем ещё один метод, который проверяет наличие отношений между предком и потомком:

  • elemA.contains(elemB) вернёт true , если elemB находится внутри elemA ( elemB потомок elemA ) или когда elemA==elemB .

Задачи

Поиск элементов

Вот документ с таблицей и формой.

  1. Таблицу с id="age-table" .
  2. Все элементы label внутри этой таблицы (их три).
  3. Первый td в этой таблице (со словом «Age»).
  4. Форму form с именем name="search" .
  5. Первый input в этой форме.
  6. Последний input в этой форме.

Для работы со структурой DOM в JavaScript предназначен объект document , который определен в глобальном объекте window . Объект document предоставляет ряд свойств и методов для управления элементами страницы.

Поиск элементов

Для поиска элементов на странице применяются следующие методы:

getElementById(value) : выбирает элемент, у которого атрибут id равен value

getElementsByTagName(value) : выбирает все элементы, у которых тег равен value

getElementsByClassName(value) : выбирает все элементы, которые имеют класс value

querySelector(value) : выбирает первый элемент, который соответствует css-селектору value

querySelectorAll(value) : выбирает все элементы, которые соответствуют css-селектору value

Например, найдем элемент по id:

С помощью вызова document.getElementById("header") находим элемент, у которого . А с помощью свойства innerText можно получить текст найденного элемента.

Поиск по определенному тегу:

С помощью вызова document.getElementsByTagName("p") находим все элементы параграфов. Этот вызов возвращает массив найденных элементов. Поэтому, чтобы получить отдельные элементы массива, необходимо пробежаться по ним в цикле.

Если нам надо получить только первый элемент, то можно к первому элементу найденной коллекции объектов:

214 Taylor [2010-09-28 03:13:00]

Читайте также:  Asus zenfone 4 selfie pro zd552kl характеристики

Я хочу заменить содержимое внутри элемента html, поэтому для этого я использую следующую функцию:

Вышеописанное работает отлично, но проблема в том, что у меня на странице больше одного элемента html, который я хочу заменить содержимым. Поэтому я не могу использовать ids, кроме классов. Мне сказали, что javascript не поддерживает какой-либо встроенный элемент get по классу. Итак, как можно пересмотреть вышеуказанный код, чтобы он работал с классами вместо ids?

P.S. Я не хочу использовать jQuery для этого.

11 ответов

192 Решение Randy the Dev [2010-09-28 03:35:00]

Этот код должен работать во всех браузерах.

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

162 ColdCold [2013-03-14 00:20:00]

Конечно, все современные браузеры теперь поддерживают следующий простой способ:

но следует предупредить, что он не работает с IE8 или ранее. См. http://caniuse.com/getelementsbyclassname

Кроме того, не все браузеры возвращают чистый NodeList , как и предполагалось.

Вам, вероятно, еще лучше использовать свою любимую библиотеку кросс-браузера.

Это будет работать в "современных" браузерах, которые реализуют этот метод.

Если вы хотите обеспечить поддержку старых браузеров, вы можете загрузить автономный механизм выбора, например Sizzle (4KB mini + gzip ) или Peppy (10K mini) и вернуться к нему, если собственный метод querySelector не найден.

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

26 kta [2013-03-22 03:35:00]

Простой и простой способ

6 afsantos [2014-09-28 02:24:00]

Я удивлен, что нет ответов с использованием регулярных выражений. Это в значительной степени Andrew answer, используя RegExp.test вместо String.indexOf , поскольку он, кажется, лучше работает для нескольких операций, согласно тесты jsPerf.
Кроме того, поддерживается в IE6.

Если вы часто ищете одни и те же классы, вы можете улучшить его, сохранив (предварительно скомпилированные) регулярные выражения в другом месте и передав их непосредственно функции, а не в строку.

Это должно работать практически в любом браузере.

Вы должны использовать его следующим образом:

Ссылка на основную публикацию
Подключение коллекторного двигателя постоянного тока
Колле́кторный электродви́гатель — электрическая машина, в которой датчиком положения ротора и переключателем тока в обмотках является одно и то же...
Перенос почты с одного хостинга на другой
Перенос почты со стороннего хостинга вам необходимо выполнить самостоятельно. Помощь со стороны технической поддержки, к сожалению, не предоставляется. Для переноса...
Перенос информации с самсунга на самсунг
У компании Samsung есть хорошая разработка, которая носит название Smart Switch. Благодаря ей вы можете узнать, как перенести данные с...
Подключение компьютер к компьютеру через кабель
Количество владельцев двух и более домашних компьютеров (ноутбуков) постоянно увеличивается. У каждого такого человека периодически возникает необходимость переноса определенных файлов...
Adblock detector