Меню

Javascript как найти элемент по классу

Поиск: getElement*, querySelector*

Свойства навигации по 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.

Метод 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 :

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

Итого

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

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

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

  • Есть метод 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 в этой форме.

Источник статьи: http://learn.javascript.ru/searching-elements-dom

Методы JavaScript для поиска элементов на странице

В этой статье мы изучим методы JavaScript для поиска элементов в HTML-документе: querySelector , querySelectorAll , getElementById и другие. Кроме них рассмотрим ещё следующие: matches , contains и closest . Первые два из них могут быть полезны для выполнения различных проверок, а третий использоваться, когда нужно получить родительский элемент по CSS-селектору.

Методы для выбора HTML-элементов

Работа с веб-страницей так или иначе связана с манипулированием HTML-элементами. Но перед тем, как над ними выполнить некоторые действия (например, добавить стили), их сначала нужно получить.

Выбор элементов в основном выполняется с помощью этих методов:

Они позволяют выполнить поиск HTML-элементов по CSS-селектору . При этом querySelector выбирает один элемент, а querySelectorAll – все.

Но они сейчас применяются довольно редко. В основном используется либо querySelector , либо querySelectorAll .

querySelectorAll

Метод querySelectorAll применяется для выбора всех HTML-элементов , подходящих под указанный CSS-селектор. Он позволяет искать элементы как по всей странице, так и внутри определённого элемента:

Здесь на первой строчке мы нашли все элементы с классом item . На следующей строчке мы сначала выбрали элемент с id=»slider» , а затем в нём все HTML-элементы с классом btn .

Метод querySelectorAll как вы уже догадались принимает в качестве аргумента CSS-селектор в формате строки, который соответственно и определяет искомые элементы. В качестве результата querySelectorAll возвращает объект класса NodeList . Он содержит все найденные элементы:

Полученный набор представляет собой статическую коллекцию HTML-элементов. Статической она называется потому, что она не изменяется. Например, вы удалили элемент из HTML-документа, а в ней как был этот элемент, так он и остался. Чтобы обновить набор, querySelectorAll нужно вызвать заново:

Узнать количество найденных элементов можно с помощью свойства length :

Обращение к определённому HTML-элементу коллекции выполняется также как к элементу массива, то есть по индексу. Индексы начинаются с 0 :

Здесь в качестве результата мы получаем HTML-элемент или undefined , если элемента с таким индексом в наборе NodeList нет.

Перебор коллекции HTML-элементов

Перебор NodeList обычно осуществляется с помощью forEach :

Также перебрать набор выбранных элементов можно с помощью цикла for или for. of :

querySelector

Метод querySelector также как и querySelectorAll выполняет поиск по CSS-селектору . Но в отличие от него, он ищет только один HTML-элемент:

На первой строчке мы выбираем HTML-элемент, имеющий в качестве id значение title . На второй мы ищем в HTML-элемент по тегу footer .

В качестве результата этот метод возвращает найденный HTML-элемент или null , если он не был найден.

querySelector всегда возвращает один HTML-элемент, даже если под указанный CSS-селектор подходят несколько:

Задачу, которую решает querySelector можно выполнить через querySelectorAll :

Но querySelector в отличие от querySelectorAll делает это намного быстрее, да и писать так проще. То есть querySelectorAll не возвращает как querySelector сразу же первый найденный элемент. Он сначала ищет все элементы, и только после того, как он это сделает, мы можем уже обратиться к первому HTML-элементу в этой коллекции.

Обычно перед тем, как выполнить какие-то действия с найденным HTML-элементом необходимо сначала проверить, а действительно ли он был найден :

Здесь мы сначала проверили существования HTML-элемента, и только потом выполнили над ним некоторые действия.

Методы getElement(s)By* для выбора HTML-элементов

Здесь мы рассмотрим методы, которые сейчас применяются довольно редко для поиска HTML-элементов. Но в некоторых случаях они могут быть очень полезны. Это:

  • getElementById – получает один элемент по id ;
  • getElementsByClassName – позволяет найти все элементы с указанным классом или классами;
  • getElementsByTagName – выбирает элементы по тегу;
  • getElementsByName – получает все элементы с указанным значением атрибута name .

1. Метод getElementById позволяет найти HTML-элемент на странице по значению id :

В качестве результата getElementById возвращает объект класса HTMLElement или значение null , если элемент не был найден. Этот метод имеется только у объекта document .

Указывать значение id необходимо с учётом регистра. Так например, document.getElementById(‘aside’) и document.getElementById(‘ASIDE’) ищут элементы с разным id .

Обратите внимание, что в соответствии со стандартом в документе не может быть несколько тегов с одинаковым id , так как значение идентификатора на странице должно быть уникальным.

Тем не менее, если вы допустили ошибку и в документе существуют несколько элементов с одинаковым id , то метод getElementById более вероятно вернёт первый элемент, который он встретит в DOM. Но на это полагаться нельзя, так как такое поведение не прописано в стандарте.

То, что делает getElementById можно очень просто решить посредством querySelector :

Кстати, оба этих метода возвращают в качестве результата один и тот же результат. Это либо HTML-элемент (экземпляр класса HTMLElement ) или null , если элемент не найден.

2. Метод getElementsByClassName позволяет найти все элементы с заданным классом или классами. Его можно применить для поиска элементов как во всём документе, так и внутри указанного. В первом случае его нужно будет вызывать как метод объекта document , а во втором – как метод соответствующего HTML-элемента:

В качестве результата он возвращает живую HTML-коллекцию найденных элементов . Чем живая коллекция отличается от статической мы рассмотрим ниже.

Здесь мы сохранили найденные элементы в переменные elsControl и elsFormControl . В первой переменной будет находиться HTMLCollection , содержащая элементы с классом control . Во второй – набор элементов с классом form-control , находящиеся в форме с id=»myform» . Для получения этой формы мы использовали document.forms.myform .

Метод getElementsByClassName позволяет искать элементы не только по одному классу, но и сразу по нескольким, которые должны присутствовать у элемента:

На querySelectorAll этот пример решается так:

3. Метод getElementsByTagName предназначен для получения коллекции элементов по имени тега:

Задачу по выбору элементов внутри другого элемента с помощью querySelectorAll выполняется намного проще:

Для выбора всех элементов можно использовать символ * :

4. В JavaScript getElementsByName можно использовать для выбора элементов, имеющих определенное значение атрибута name :

Через querySelectorAll это выполняется так:

getElementsBy* и живые HTML-коллекции

В JavaScript getElementsByTagName , getElementsByClassName и getElementsByName в отличие от других методов (например, querySelectorAll ) возвращают живую коллекцию HTML-элементов (на английском live HTMLCollection ). То есть коллекцию содержимое которой автоматически обновляется при изменении DOM. Для наглядности рассмотрим следующий пример.

Например, на странице изначально имеется два

  • . Выберем их с помощью getElementsByTagName и сохраним полученную HTMLCollection в переменную els . Теперь с помощью els мы можем получить эту коллекцию. Сейчас в ней два
  • . Затем через 5 секунд, используя setTimeout добавим ещё один
  • . Если сейчас мы обратимся к переменной els , то увидим, что в ней уже находятся три
  • :

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

    Если в коде приведённом выше заменить выбор элементов на querySelectorAll , то мы увидим, что в ней находится статическая (не живая) коллекция элементов:

    Как вы видите количество элементов в коллекции не изменилось. Чтобы после изменения DOM получить актуальную коллекцию элементов, их нужно просто выбрать заново посредством querySelectorAll :

    Таким образом в JavaScript насчитывается 6 основных методов для выбора HTML-элементов на странице. По чему они ищут и что они возвращают приведено на следующем рисунке:

    Экземпляры класса HTMLCollection не имеют в прототипе метод forEach . Поэтому если вы хотите использовать этот метод для перебора такой коллекции, её необходимо преобразовать в массив:

    matches, closest и contains

    В JavaScript имеются очень полезные методы:

    • matches – позволяет проверить соответствует ли HTML-элемент указанному CSS-селектору;
    • closest – позволяет найти для HTML-элемента его ближайшего предка, подходящего под указанный CSS-селектор (поиск начинается с самого элемента);
    • contains – позволяет проверить содержит ли данный узел другой в качестве потомка (проверка начинается с самого этого узла).

    1. Метод matches ничего не выбирает, но он является очень полезным, так как позволяет проверить HTML-элемент на соответствие CSS-селектору. Он возвращает true , если элемент ему соответствует, иначе false .

    Пример, в котором выберем все
    , расположенные внутри #questions , а затем удалим те из них, которые соответствуют селектору .answered :

    В этом примере проверим каждый
    на соответствие селектору active . Выведем в консоль каждый такой элемент:

    Ранее, в «старых» браузерах данный метод имел название matchesSelector , а также поддерживался с использованием префиксов. Если вам нужна поддержка таких браузеров, то можно использовать следующий полифилл:

    2. Метод closest очень часто используется в коде. Он позволяет найти ближайшего предка, подходящего под указанный CSS-селектор. При этом поиск начинается с самого элемента, для которого данный метод вызывается. Если этот элемент будет ему соответствовать, то closest вернёт его.

    Здесь мы сначала выбираем HTML-элемент .level-3 и присваиваем его переменной el . Далее мы пытаемся среди предков этого элемента включая его сам найти такой, который отвечает заданному CSS-селектору, в данном случае .level-1 .

    Начинается поиск всегда с самого этого элемента. В данном случае он не подходит под указанный селектор. Следовательно, этот метод переходит к его родителю. Он тоже не отвечает этому CSS-селектору. Значит, closest переходит дальше, то есть уже к его родителю. Этот элемент подходит под указанный селектор. Поэтому поиск прекращается и этот метод возвращает его в качестве результата.

    Метод closest возвращает null , когда он дошёл бы конца иерархии и не нашёл элемент отвечающий указанному селектору. То есть, если такого элемента нет среди предков.

    В этом примере найдем с помощью closest для .active его ближайшего родителя, отвечающего CSS-селектору #list > li :

    В JavaScript closest очень часто используется в обработчиках событий. Это связано с тем, чтобы события всплывают и нам нужно, например, узнать кликнул ли пользователь в рамках какого-то элемента:

    3. Метод contains позволяет проверить содержит ли некоторый узел другой в качестве потомка. При этом проверка начинается с самого этого узла, для которого этот метод вызывается. Если узел соответствует тому для которого мы вызываем данный метод или является его потомком, то contains в качестве результата возвращает логическое значение true . В противном случае false :

    Здесь выражение elDiv1.contains(elDiv1) возвращает true , так как проверка начинается с самого элемента. Это выражение elDiv1.contains(elDiv3) тоже возвращает true , так как elDiv3 находится внутри elDiv1 . А вот elDiv1.contains(elDiv4) в качестве результата возвращает false , так как elDiv4 не находится внутри elDiv1 .

    В этом примере проверим с помощью contains содержит ли

    другие узлы в качестве потомка:

    Метод contains позволяет проверить является ли потомком не только узел-элемент, но и любой другой узел. Например, узнаем является ли потомком elDiv1 указанный текстовый узел:

    Задачи

    1. Узнать количество элементов с атрибутом data-toggle=»modal» на странице:

    3. Получить элемент по id , значение которого равно pagetitle :

    4. Выполнить поиск элемента по классу nav :

    , находящийся в теге

    6. Имеется страница. В ней следует выбрать:

    • последний элемент с классом article , расположенный в (решение);
    • все элементы .section , находящиеся в .aside кроме 2 второго (решение);
    • элемент расположенный после (решение).

    Источник статьи: http://itchief.ru/javascript/get-elements

    document.querySelector() и document.querySelectorAll() в JavaScript

    Для работы с DOM (объектная модель документа) элементами на странице в JavaScript есть удобные методы, которые позволяют получать и далее манипулировать ими. Еще недавно активно использовалось 4 метода с помощью которых можно добраться до элементов:

    • getElementsByClassName() — по именам классов;
    • getElementsByTagName() — по имени тега;
    • getElementsByName() — по значению атрибута name;
    • getElementById() — по идентификатору (id) элемента.

    Сегодня все эти методы заменили:

    querySelector()

    querySelector() — это document метод, который возвращает первый элемент, соответствующий указанному селектору или группе селекторов. Если поиск не увенчался успехом возвращается значение null .

    Синтаксис

    let element — для того, чтобы работать с полученными элементами, создаем переменную, куда и записываем полученные данные.

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

    querySelector — вызов метода.

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

    При работе с querySelector() мы можем указать несколько селекторов, их запись разнится в зависимости от задачи

    Также метод querySelector() позволяет получать первые и последние элементы в списке

    querySelectorAll()

    querySelectorAll() — это document метод, который возвращает коллекцию ( NodeList ) всех найденных элементов на странице, соответствующие указанному селектору или группе селекторов. Если поиск не увенчался успехом возвращается пустой NodeList .

    Здесь мы получаем все элементы которые содержат класс class-name и id elemId и меняет текст в них через цикл for .

    querySelectorAll() возвращает статическую (non-live) коллекцию элементов. Если после вызова метода на странице появились еще элементы соответствующие прописанным селекторам и необходимо получить доступ и до них, querySelectorAll() нужно вызывать снова.

    Ниже бегло рассмотрим устаревшие, но все еще поддерживаемые методы getElementsBy* , которые сегодня еще можно встретить, особенно в написанных давно проектах.

    getElementById()

    getElementById() — это document метод, который возвращает первый элемент, соответствующий указанному идентификатору ( id ). Если совпадений не найдено возвращается значение null .

    getElementsByClassName()

    getElementsByClassName() — это document метод, который возвращает коллекцию ( HTMLCollection ) всех найденных элементов на странице, соответствующие указанному классу или группе классов. Если поиск не увенчался успехом возвращается пустой HTMLCollection .

    getElementsByTagName()

    getElementsByTagName() — это document метод, который возвращает коллекцию ( HTMLCollection ) всех найденных элементов на странице, соответствующие указанному тегу. Если поиск не увенчался успехом возвращается пустой HTMLCollection .

    Если вместо тега вставить звездочку ‘*’ метод вернет все элементы представленные на странице.

    getElementsByName()

    getElementsByName() — это document метод, который возвращает коллекцию ( NodeList ) всех найденных элементов на странице, соответствующие указанному атрибуту name . Если поиск не увенчался успехом возвращается пустой NodeList .

    Методы getElementsBy* возвращают «живые» коллекции, то есть они меняются в зависимости от изменения DOM. В свою очередь querySelectorAll() получает статическую коллекцию.

    Итого

    При необходимости получения первого элемента или коллекции со страницы сегодня используют методы querySelector() и querySelectorAll() . Они позволяют искать элементы по id, css, тегу или атрибуту, а также гибко компоновать их, указывая один, два и более селектора.

    Методы getElementsBy* , также позволяют работать с DOM, однако считаются устаревшими и встречаются чаще в старом коде.

    Источник статьи: http://learnjs.ru/lessons/queryselector/

    How to Get Element By Class in JavaScript?

    I want to replace the contents within a html element so I’m using the following function for that:

    The above works great but the problem is I have more than one html element on a page that I want to replace the contents of. So I can’t use ids but classes instead. I have been told that javascript does not support any type of inbuilt get element by class function. So how can the above code be revised to make it work with classes instead of ids?

    P.S. I don’t want to use jQuery for this.

    12 Answers 12

    This code should work in all browsers.

    The way it works is by looping through all of the elements in the document, and searching their class list for matchClass . If a match is found, the contents is replaced.

    Of course, all modern browsers now support the following simpler way:

    but be warned it doesn’t work with IE8 or before. See http://caniuse.com/getelementsbyclassname

    Also, not all browsers will return a pure NodeList like they’re supposed to.

    You’re probably still better off using your favorite cross-browser library.

    That will work in «modern» browsers that implement that method (IE8+).

    If you want to provide support for older browsers, you could load a stand-alone selector engine like Sizzle (4KB mini+gzip) or Peppy (10K mini) and fall back to it if the native querySelector method is not found.

    Is it overkill to load a selector engine just so you can get elements with a certain class? Probably. However, the scripts aren’t all that big and you will may find the selector engine useful in many other places in your script.

    I’m surprised there are no answers using Regular Expressions. This is pretty much Andrew’s answer, using RegExp.test instead of String.indexOf , since it seems to perform better for multiple operations, according to jsPerf tests.
    It also seems to be supported on IE6.

    If you look for the same class(es) frequently, you can further improve it by storing the (precompiled) regular expressions elsewhere, and passing them directly to the function, instead of a string.

    This should work in pretty much any browser.

    You should be able to use it like this:

    I assume this was not a valid option when this was originally asked, but you can now use document.getElementsByClassName(»); . For example:

    There are 3 different ways to get elements by class in javascript. But here for your query as you have multiple elements with the same class names you can use 2 methods:

    getElementsByClassName Method — It returns all the elements with the specified class present in the document or within the parent element which called it.

    querySelectorAll Method — It select element on the basic of CSS selectors. Pass your CSS class to it with a dot and it will return all the element having specified class as an array-like object.

    Источник статьи: http://stackoverflow.com/questions/3808808/how-to-get-element-by-class-in-javascript

    Document.querySelector()

    The Document method querySelector() returns the first Element within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned.

    Note: The matching is done using depth-first pre-order traversal of the document’s nodes starting with the first element in the document’s markup and iterating through sequential nodes by order of the number of child nodes.

    Syntax

    Parameters

    A string containing one or more selectors to match. This string must be a valid CSS selector string; if it isn’t, a SyntaxError exception is thrown. See Locating DOM elements using selectors for more about selectors and how to manage them.

    Note: Characters that are not part of standard CSS syntax must be escaped using a backslash character. Since JavaScript also uses backslash escaping, be especially careful when writing string literals using these characters. See Escaping special characters for more information.

    Return value

    An Element object representing the first element in the document that matches the specified set of CSS selectors, or null is returned if there are no matches.

    If you need a list of all elements matching the specified selectors, you should use querySelectorAll() instead.

    Exceptions

    Thrown if the syntax of the specified selectors is invalid.

    Usage notes

    If the specified selector matches an ID that is incorrectly used more than once in the document, the first element with that ID is returned.

    CSS pseudo-elements will never return any elements, as specified in the Selectors API.

    Escaping special characters

    To match against an ID or selectors that do not follow standard CSS syntax (by using a colon or space inappropriately, for example), you must escape the character with a backslash (» \ «). As the backslash is also an escape character in JavaScript, if you are entering a literal string, you must escape it twice (once for the JavaScript string, and another time for querySelector() ):

    Examples

    Finding the first element matching a class

    In this example, the first element in the document with the class » myclass » is returned:

    Complex selectors

    Selectors can also be really powerful, as demonstrated in the following example. Here, the first element with the name «login» ( ) located inside a

    Negation

    As all CSS selector strings are valid, you can also negate selectors:

    This will select an input with a parent div with the user-panel class but not the main class.

    Источник статьи: http://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

    Searching: getElement*, querySelector*

    DOM navigation properties are great when elements are close to each other. What if they are not? How to get an arbitrary element of the page?

    There are additional searching methods for that.

    document.getElementById or just id

    If an element has the id attribute, we can get the element using the method document.getElementById(id) , no matter where it is.

    Also, there’s a global variable named by id that references the element:

    …That’s unless we declare a JavaScript variable with the same name, then it takes precedence:

    This behavior is described in the specification, but it is supported mainly for compatibility.

    The browser tries to help us by mixing namespaces of JS and DOM. That’s fine for simple scripts, inlined into HTML, but generally isn’t a good thing. There may be naming conflicts. Also, when one reads JS code and doesn’t have HTML in view, it’s not obvious where the variable comes from.

    Here in the tutorial we use id to directly reference an element for brevity, when it’s obvious where the element comes from.

    In real life document.getElementById is the preferred method.

    The id must be unique. There can be only one element in the document with the given id .

    If there are multiple elements with the same id , then the behavior of methods that use it is unpredictable, e.g. document.getElementById may return any of such elements at random. So please stick to the rule and keep id unique.

    The method getElementById can be called only on document object. It looks for the given id in the whole document.

    querySelectorAll

    By far, the most versatile method, elem.querySelectorAll(css) returns all elements inside elem matching the given CSS selector.

    Here we look for all
    elements that are last children:

    This method is indeed powerful, because any CSS selector can be used.

    Pseudo-classes in the CSS selector like :hover and :active are also supported. For instance, document.querySelectorAll(‘:hover’) will return the collection with elements that the pointer is over now (in nesting order: from the outermost to the most nested one).

    querySelector

    The call to elem.querySelector(css) returns the first element for the given CSS selector.

    In other words, the result is the same as elem.querySelectorAll(css)[0] , but the latter is looking for all elements and picking one, while elem.querySelector just looks for one. So it’s faster and also shorter to write.

    matches

    Previous methods were searching the DOM.

    The elem.matches(css) does not look for anything, it merely checks if elem matches the given CSS-selector. It returns true or false .

    The method comes in handy when we are iterating over elements (like in an array or something) and trying to filter out those that interest us.

    closest

    Ancestors of an element are: parent, the parent of parent, its parent and so on. The ancestors together form the chain of parents from the element to the top.

    The method elem.closest(css) looks for the nearest ancestor that matches the CSS-selector. The elem itself is also included in the search.

    In other words, the method closest goes up from the element and checks each of parents. If it matches the selector, then the search stops, and the ancestor is returned.

    getElementsBy*

    There are also other methods to look for nodes by a tag, class, etc.

    Today, they are mostly history, as querySelector is more powerful and shorter to write.

    So here we cover them mainly for completeness, while you can still find them in the old scripts.

    • elem.getElementsByTagName(tag) looks for elements with the given tag and returns the collection of them. The tag parameter can also be a star «*» for “any tags”.
    • elem.getElementsByClassName(className) returns elements that have the given CSS class.
    • document.getElementsByName(name) returns elements with the given name attribute, document-wide. Very rarely used.

    Let’s find all input tags inside the table:

    Novice developers sometimes forget the letter «s» . That is, they try to call getElementByTagName instead of getElementsByTagName .

    The «s» letter is absent in getElementById , because it returns a single element. But getElementsByTagName returns a collection of elements, so there’s «s» inside.

    Another widespread novice mistake is to write:

    That won’t work, because it takes a collection of inputs and assigns the value to it rather than to elements inside it.

    We should either iterate over the collection or get an element by its index, and then assign, like this:

    Looking for .article elements:

    Live collections

    All methods «getElementsBy*» return a live collection. Such collections always reflect the current state of the document and “auto-update” when it changes.

    In the example below, there are two scripts.

      The first one creates a reference to the collection of

    In contrast, querySelectorAll returns a static collection. It’s like a fixed array of elements.

    If we use it instead, then both scripts output 1 :

    Now we can easily see the difference. The static collection did not increase after the appearance of a new div in the document.

    Summary

    There are 6 main methods to search for nodes in DOM:

    Method Searches by. Can call on an element? Live?
    querySelector CSS-selector
    querySelectorAll CSS-selector
    getElementById id
    getElementsByName name
    getElementsByTagName tag or ‘*’
    getElementsByClassName class

    By far the most used are querySelector and querySelectorAll , but getElement(s)By* can be sporadically helpful or found in the old scripts.

    • There is elem.matches(css) to check if elem matches the given CSS selector.
    • There is elem.closest(css) to look for the nearest ancestor that matches the given CSS-selector. The elem itself is also checked.

    And let’s mention one more method here to check for the child-parent relationship, as it’s sometimes useful:

    • elemA.contains(elemB) returns true if elemB is inside elemA (a descendant of elemA ) or when elemA==elemB .

    Tasks

    Search for elements

    Here’s the document with the table and form.

    1. The table with id=»age-table» .
    2. All label elements inside that table (there should be 3 of them).
    3. The first td in that table (with the word “Age”).
    4. The form with name=»search» .
    5. The first input in that form.
    6. The last input in that form.

    Источник статьи: http://javascript.info/searching-elements-dom

    Форум

    Discord чат

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

    Стандарт DOM предусматривает несколько средств поиска элемента. Это методы getElementById , getElementsByTagName и getElementsByName .

    Более мощные способы поиска предлагают javascript-библиотеки.

    Поиск по id

    Самый удобный способ найти элемент в DOM — это получить его по id . Для этого используется вызов document.getElementById(id)

    Например, следующий код изменит цвет текста на голубой в div ‘е c id=»dataKeeper» :

    Поиск по тегу

    Следующий способ — это получить все элементы с определенным тегом, и среди них искать нужный. Для этого служит document.getElementsByTagName(tag) . Она возвращает массив из элементов, имеющих такой тег.

    Например, можно получить второй элемент(нумерация в массиве идет с нуля) с тэгом li :

    Что интересно, getElementsByTagName можно вызывать не только для document , но и вообще для любого элемента, у которого есть тег (не текстового).

    При этом будут найдены только те объекты, которые находятся под этим элементом.

    Например, следующий вызов получает список элементов LI , находящихся внутри первого тега div :

    Получить всех потомков

    Вызов elem.getElementsByTagName(‘*’) вернет список из всех детей узла elem в порядке их обхода.

    Выведет последовательность: ol1, li1, li2 .

    Поиск по name : getElementsByName

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

    Он работает только с теми элементами, для которых в спецификации явно предусмотрен атрибут name : это form , input , a , select , textarea и ряд других, более редких.

    Метод document.getElementsByName не будет работать с остальными элементами типа div , p и т.п.

    Другие способы

    Существуют и другие способы поиска по DOM: XPath, cssQuery и т.п. Как правило, они реализуются javascript-библиотеками для расширения стандартных возможностей браузеров.

    Также есть метод getElementsByClassName для поиска элементов по классу, но он совсем не работает в IE, поэтому в чистом виде им никто не пользуется.

    Правило здесь простое: один элемент — Element , много — Elements . Все методы *Elements* возвращают список узлов.

    в IE ниже 6-й версии возвращает пустой объект, для этого в старых версиях IE нужно использовать

    Ниже IE6 жизни нет

    как по мне и в ИЕ6 жизни нет.

    Как по мне, в IE жизни не было и нет вообще))))

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

    Долой осла!
    Даёшь на каждом нормальном сайте указание на браузер пользователя и ссылки на нормальные браузеры, если пользователь сидит на осле!

    Я Js изучаю, но совместимость с ие просто пролистываю не читая — фтопку кривотню!

    Если бы не осел, то в браузеры развивались бы медленнее, очень много инноваций он ввел. Да и много в нем есть удобного что другие не поддерживают(пусть немного но есть).

    Определите в другом браузере нажатия 2х кнопок сразу, правой и левой одновременно, а в ослике можно))

    Чувак, польностью согласен. Майкрорсофт давно бы прекратили выпускать это уродсто по имени интернет эксплорер.

    Народ, ну что за холивар) В IE много приятных вкусностей. Вот хотя бы при изменении свойств top, bottom, left, right и подобных можно опускать px и указывать только число. Везде бы так) Представляете, насколько сокращается JS код

    а представляете, насколько сокращается JS код, если бы небыло IE

    Я бы на вашем месте не говорил бы так про ослика, он внес большой вклад в развитие интернет -технологий. Для и вообще, я сам вырос на IE 3 и поэтому мне он роднее, чем все остальные. Ну а какие вы программисты, если даже не учитываете все браузера, а говорите «долой его». Такова учесть программиста, чтобы учитывать все. Ибо нехрен лесть в это дело вообще.

    Должен быть стандарт для программиста — один язык, которые все браузеры понимают четко и однозначно. А писать веб разработчикам для каждого браузера своим кодом — это маразм. Это все равно, что писать программу под все операционные системы сразу.

    По мне так все браузера хороши.

    Ручки переставить в правильное место, тогда будет счастье и в IE

    Код из раздела «Получить всех потомков» не пашет. Файрбуг пишет:

    Перенесите код скрипта ниже основного HTML-кода, либо запускайте скрипт после полной загрузки DOM’а.

    подскажите, что не то в функции $:

    в ІЕ или в Опера 9.24 в test єсть только один елемент?

    Требуется отыскать все DIV с и добавить в них новые DIV’ы с другими классами.

    Когда первый if(divs[i].className == ‘tab’) срабатывает, то после innerHTML, видимо, массив divs меняется и остальные DIV’ы с тем же классом tab найти не получается.

    Для этого нужно что ли отдельно сначала заполнить массив удовлетворяющих критерию div’ами, а потом ещё одним циклом их пройти и уже провести операции innerHTML?

    Да, интересный кстати пример

    замените название переменной div на divs, иначе цикл то как будет работать?
    var divs = document.getElementsByTagName(‘div’)

    не думал что список будет меняться с изменением innerHTML, но если это так то поидее i—; после innerHTML должно вылечить.

    Так как у тебя идет работа с «живыми объектами» div. То после первого преобразования (нахождения div с классом tab) у тебя количество тегов div увеличивается, а так как у тебя длинна массива найденных елементов закэширована (var l = divs.length). То и поиск будет происходить пока не закончится длинна массива.
    Что бы просто непереписывать тебе скрипт, просто внеси вычисление divs.length в цикл:

    Такую особенность заметил, но не нашел подробную информацию, буду рад если разьясните.

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

    На событие onkeyup я передаю функции checkbox текущий элемент, и элемент checkbox с (изначально я его передавал в кавычках и в функции достигал его через getElementById, но случайно понял что если убрать кавычки то будет передаваться элемент со схожим id). Код работает, но не понятно почему элемент с доступен из другого элемента таким образом? В Javascript новичок. Спасибо.

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

    // функция поиска элементов по конкретному className
    // ищет в т.ч. когда через пробел в тестируемом элементе указано несколько className
    // поиск начинается от элемента in_start или document (по умолчанию)
    // возвращает массив ссылок на элементы
    if(typeof(getElementsByClassName) != «function») <
    function getElementsByClassName(in_class,in_start) <
    var start_el = in_start || document;
    var all_els = start_el.getElementsByTagName(«*»)
    var rez_arr = Array();
    for(var i=0; i

    относительность поиска при вызове getElementsByTagName допускается:

    что очень замечательно, а вот относительности вызова getElementById увы нельзя:

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

    getElementsById — такого обращения не существует. есть getElementById без «s«. ведь id является уникальным идентификатором элемента среди остальных.

    id должен быть уникальным в пределах документа. с 2мя одинаковыми id ваш html не пройдёт валидацию. w3c посоветует использовать class вместо id

    А как выбрать все теги и всё что в них домножить на определенное число?

    и в td_tags у вас будут все елементы-теги

    Подскажите пожалуйста.. вот тут пример

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

    • input type=»button» onclick=»go()» value=»Go»
    • ul
    • li style=»background-color:red» Осторожно /li
    • li Информация /li
    • ul

    выдает такое сообщение — [object HTMLLIElement], в чем ошибка?

    А что требовалось получить? Он все правильно выводит. В данном коде выбран сам элемент.
    В коде выводится, что это объект.
    Если хочется вытащить содержание, то следовало бы писать так:

    По идее должно работать, не могу сейчас проверить.

    почему-то не пашет выражение такого рода
    var linka = document.getElementsByTagName(«a»).getElementsByTagName(«img»);

    опера пишет
    Uncaught exception: TypeError: ‘document.getElementsByTagName(«a»).getElementsByTagName’ is not a function

    Не знакома с haml, но в любом случае, параметром функции getElementById должна быть строка. То есть в вашем случае нужно писать так:

    я этот вопрос на форуме задавал, а тут целая статья на сайте есть.

    Молодцы.
    «Самый удобный способ найти элемент в DOM — это получить его по id.»
    А как получить их список? Где взять эти самые Id, если нужно просто пройти по документу?
    Ни ссылки, ни комментария.

    Действительно! Какие плохиши!
    нет чтоб не только разжевали но еще и проглотили бы!

    В пиве сила! В вине мудрость! А в воде. микробы!

    А если нужен поиск по тэгу не во всём документе, а только в выделенном мышью куске — это возможно ли и как?

    всем привет. У меня вопрос. Как искать содержимое в таком код html:

    В пиве сила! В вине мудрость! А в воде. микробы!

    Меня до крайности смутило, корректное исполнение кода в 5 разных браузерах.
    Это нормально?

    Я этого тоже не могу понять

    Меня до крайности смутило, корректное исполнение кода в 5 разных браузерах.
    Это нормально?

    Не плохо было бы добавить информацию о querySelector и querySelectorAll так как это поддерживают почти все браузеры.

    а как реализовать такой алгоритм:
    к 2ум страницам штмл «штмл1» и «штмл2» подключён один и тот же js и в нём код, который должен делать:
    выборка элемента с штмл1 на него событие клик,а действие которое должно происходить применяется на элемент в штмл2, но нечего не работает, что сделать?

    Подскажите пожалуйста:
    Вот допустим есть некий DIV с . В этом блоке находятся ссылки с неким . Как найти все ссылки которые находятся в этом блоке?

    Нужно вытянуть ссылки (значение href);

    Заранее спасибо всем тем кто откликнется.

    Всё! Спасибо. Разобрался сам ))))

    Здравствуйте.
    Подскажите пожалуйста. Нужно для ссылок в параграфе (p) применить класс «lightbox»
    Использую пока такой код:
    var els = document.getElementsByTagName(‘a’);
    for (var i = 0; i

    но он применяет этот класс ко всем ссылкам в документе. Пробовал сделать как написано в статье — не получилось.
    Помогите разобраться.

    А что будет, если скопировать(клонировать) узел, который содержит ID?
    В копии не д.б. ID или всё-таки ID станет не уникальным?

    Помогите, пожалуйста!
    Программа находит все ссылки, которые есть в div, и выводит их URL- адреса, но они не активны, как сделать, чтобы он выводил все адреса и по ним ещё можно было перейти. Я думаю проблема в выводе:

    2. Не используйте document.write — это из времен динозавров. Используйте innerHTML.

    Когда я подставляю в вывод хрев, то переход осуществляется наверх страницы, если нажать на любой адрес. Я вот, что думаю может, есть какой-то атрибут, который передает все адреса. Если такого нет, то очень грустно. Сколько гуглив я ничего все равно не нашел.
    Это лабораторная в ВУЗе, поэтому приходится использовать

    [quote]
    document.write(»+giper[i]+»);
    Когда я подставляю в вывод хрев, то переход осуществляется наверх страницы, если нажать на любой адрес. Я вот, что думаю может, есть какой-то атрибут, который передает все адреса. Если такого нет, то очень грустно. Сколько гуглив я ничего все равно не нашел.
    Это лабораторная в ВУЗе, поэтому приходится использовать document.write
    [/quote]
    «хрев», как вы выразились, который, конечно, даже по самым невразумительным правилам транскрибирования — всё же «хреф», является сокращением от «Hypertext REFerence» — что в переводе с английского означает «гипертекстовая отсылка», что в свою очередь намекает что именно в этом параметре должен быть указан адрес перехода.
    И эта инфа свободно доступна по первой же ссылке в выдаче гугла по запросу «href» или «html a».

    З.Ы. с такими навыками поиска информации в ВУЗ не было смысла идти — стоило сразу после 9го класса идти работать грузчиком — КПД выше был бы.

    Источник статьи: http://javascript.ru/tutorial/dom/search

    Выборка элементов страницы в JavaScript

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

    Статья, показывающая работу со свойствами элемента посредством 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 , уже являются ссылкой и готовы к дальнейшим манипуляциям. Остальные выборки возвращают массивы. Но это не такая большая проблема, как может показаться; просто пробежим по всем элементам и каждому присвоим нужное свойство. Пусть это будет что-то совсем простое — сделать цвет текста красным.

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

    Источник статьи: http://a-panov.ru/javascript-getelement-queryselector/

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

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