Progress-servis55.ru

Новости из мира ПК
2 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Javascript document getelementsbytagname

Поиск: 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:

МетодИщет по.Ищет внутри элемента?Возвращает живую коллекцию?
querySelectorCSS-selector
querySelectorAllCSS-selector
getElementByIdid
getElementsByNamename
getElementsByTagNametag or ‘*’
getElementsByClassNameclass

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

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

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

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

Задачи

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

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

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

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

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

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

В этой статье мы рассмотрим какие в JavaScript имеются методы для выбора элементов на странице, а также как с ними работать.

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

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

Для этого в JavaScript имеются специальные предназначенные для выполнения этих действий методы . Наиболее часто используемые из них – это querySelectorAll и querySelector. Они выполняют поиск элементов в DOM по CSS-селектору . Они отличаются друг от друга только тем, что querySelectorAll возвращает все найденные элементы, а querySelector — только первый из них.

Кроме этого, в API DOM имеются ещё другие методы для выбора элементов. Это getElementBy >querySelectorAll и querySelector .

querySelectorAll – выбор элементов по CSS селектору

querySelectorAll – это метод, который позволяет найти все элементы по CSS селектору внутри всей страницы или конкретного элемента, для которого он вызывается.

В приведённом выше коде selector – это строковый аргумент, представляющий собой CSS селектор, в соответствии с которым нужно найти элементы.

Метод querySelectorAll возвращает все найденные элементы в виде статической коллекции типа NodeList .

Статическая коллекция — это такая, которая не изменяется , если после вызова этого метода на странице появятся новые элементы, подходящие под указанный CSS селектор. Таким образом, если вам необходимо обновить полученную коллекцию после изменения DOM-страницы, то её следует просто сформировать, заново вызвав этот метод с указанным селектором ещё раз.

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

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

В этом случае возвращается DOM элемент находящийся под указанным индексом в коллекции или undefined , если элемента с таким индексом нет.

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

Перебор элементов посредством цикла for. of:

Примеры

1. Выполним проверку существование элементов с атрибутом data-toggle=»modal» :

querySelector – выбор элемента по CSS селектору

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

В приведённом коде selector – это строка, содержащая CSS селектор, в соответствии с которым необходимо найти элемент.

Результат метода querySelector аналогичен elem.querySelectorAll(‘selector’)[0] , но в отличие от него он выполняет это намного быстрее. Это происходит потому, что querySelector сразу же останавливает процесс поиска, как только находит соответствующий элемент . В то время как elem.querySelectorAll(‘selector’)[0] сначала находит все элементы, и только после того как он все их нашёл мы уже можем обратиться к этим элементам и с помощью оператора доступа (квадратные скобки) взять первый из них.

В качестве результата метод querySelector возвращает ссылку на объект типа Element или null (если элемент не найден).

Примеры

1. Обратиться к элементу по id , значение которого равно pagetitle :

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

3. Обратиться к элементу

, находящемуся в теге

4. Проверить наличие элемента с классом modal на странице:

«Старые» методы для выбора элементов

К данной категории относятся методы, которые сейчас практически не применяются для поиска элементов. Их в основном можно встретить в «старом» коде.

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

getElementById – получение элемента по значению id

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

Метод getElementById имеется только у объекта document .

Указания значения id необходимо выполнять с учётом регистра, т.к., например, main и Main – это разные значения.

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

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

Например, получим элемент, имеющий в качестве id значение pagetitle :

Действие метода getElementById можно очень просто выполнить с помощью querySelector :

getElementsByClassName – получение списка элементов по именам классов

Этот метод позволяет найти все элементы с указанными классами во всём документе или в некотором элементе. В первом случае его необходимо вызывать у document , а во втором – у элемента, внутри которого вы хотите их получить.

  • в переменную elements будет помещена живая коллекция ( HTMLCollection ) найденных элементов;
  • в names необходимо задать строку, состоящую из одного или нескольких классов разделённых между собой с помощью пробела.

Например, получим все элементы с классом btn , которые имеются на странице:

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

Например, выберем элементы на странице у которых имеются классы btn и btn-danger :

Функция getElementsByClassName позволяет искать элементы не только внутри всего документа, но и в конкретном элементе.

Например, найти все элементы с классом code , расположенные внутри элемента #main :

Выполнить эту задачу с помощью querySelectorAll можно более эффективно:

getElementsByTagName – получение элементов по имени тега

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

tagName — это аргумент, который должен содержать строку с названием тега, который нужно найти. Название тега необходимо указывать с помощью прописных букв. Чтобы выбрать все элементы можно использовать символ * .

Например, получить коллекцию элементов
, находящихся в элементе с :

Этот пример через querySelectorAll можно решить так:

getElementsByName – получение элементов по значению атрибута name

Метод getElementsByName может применяться, когда вам нужно выбрать элементы, имеющие атрибут name с указанным значением.

name — это аргумент, содержащий строку со значением атрибута name в соответствии с которым нужно найти элементы.

Например, выбрать все элементы на странице с name=»phone» :

Реализовать это с querySelectorAll можно следующим образом:

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

Методы getElementsBy* в отличие от querySelectorAll возвращают живую коллекцию элементов . Т.е. коллекцию содержимое которой может изменяться при изменении DOM. Рассмотрим это на примере.

В этом примере получим элементы li находящиеся в #list и выведем их количество в консоль. Затем через 5 секунд программно добавим ещё один элемент li в #list и ещё раз возвратим их количество в консоль.

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

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

Как вы видите количество элементов в коллекции не изменилось.

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

Итого

В JavaScript можно выделить 6 основных методов для выбора элементов на странице.

Некоторые из них можно использовать для поиска одних элементов внутри других. Среди них: querySelector , querySelectorAll , getElementsByTagName , getElementsByClassName . Другие ( getElementById и getElementsByName ) можно применять только для выбора элементов в пределах всей страницы ( document ).

Кроме этого, их можно ещё дополнительно разделить на 2 группы. К первой группе можно отнести методы, которые возвращают статическую коллекцию элементов. Это querySelector , querySelectorAll и getElementById . Ко второй те методы, которые возвращаю живую коллекцию. Это getElementsByTagName , getElementsByClassName и getElementsByName .

Дополнительные материалы

matches – проверка на соответствие элемента CSS селектору

matches – это метод, который проверяет соответствует элемент, для которого он вызывается указанному CSS селектору. Если соответствует, то возвращает true . В противном случае false .

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

Чтобы обеспечить поддержку данного метода большим количеством браузеров можно использовать следующий полифилл:

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

closest – поиск ближайшего предка по CSS селектору

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

В приведённом коде selector – это строка, содержащая селектор, в соответствии с которым необходимо найти ближайшего предка для someElement .

В качестве результата метод closest возвращает найденный DOM-элемент или null (если соответствующий элемент найден не был).

Например, найдем для некоторого элемента ближайшего предка по селектору .parent :

contains – проверка наличия одного элемента внутри другого

contains – это метод, посредством которого можно проверить существование одного элемента внутри другого.

В приведённом коде result – это переменная, в которую поместится значение true или false в зависимости от того имеется ли element2 внутри element1 .

Задачи

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

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

document.getElementsByTagName(“*”) Or document.all

document.getElementsByTagName(«*») works for IE/Firefox/Opera, But doesn’t work for Chrome and Safari.

document.all works for IE/Chrom/Safari, But doesn’t work for Firefox.

How can I deal with it?

6 Answers 6

document.all should be avoided as it is not Standards compliant. Instead you can use document.getElementById() for Particular Node or use $(«*») For selecting all the elements using jQuery.

But still if you would like to use document.all then see to it that Tag is removed from your page, as well as the xmlns attribute is also removed from your tag.

Change anything like this:

to:

I have tested it on FireFox 19.0.2 and document.all works fine for me.

The reason: When you use the tag you are telling the browser that your webpage is complaint with the standards which tells you to NOT use the document.all in your script, so the browser also does not allow it.

But as you want to use it, you are obviously not following the standards so don’t even bother to add the tag otherwise document.all won’t work.

Or shorter version

document.getElementsByTagName() works perfectly in all modern browsers (everything newer than IE5).

If it doesn’t seem to work in Chrome or Safari, then it’s most likely just a symptom of an error you have elsewhere.

I admit that there might be technologies today I don’t know about that allow for this sort of thing to be done in cross-browser format, but the way I’ve always had to do it in the past is to have a check of some sort for which browser you’re using.

A simpler solution, though, is to try to run one of them, and if you get nothing/null/an error, use the other.

Anyway, if you really don’t want to deal with it yourself, you should use a library that will deal with it for you (e.g., jQuery).

While I would not encourage you to do a document.all because it implies you are doing a lot of client-side parsing that is just not needed I do understand there is a lot of legacy stuff out there etc. I wanted to post a little extension of my thoughts on a wrapper method for document.all.

Of course this assumes you have a getElementsByTagName function, which should be the case.

Without sufficient rep to comment on @Khurram Hassan ‘s answer, I’ll put it here, along with my answer to the original question.

First, the original question. My solution would be (and is in my own code, pending an answer to a problem with it which I put up on this site) document.getElementsByTagName(«*»), which actually does get every single element on Chrome. I tested it out on google.com on Google Chrome with a profile loaded and the eight most common visited sites listed, and it came out to 356 individual elements with a tag name. In fairness, this included html, head, body, and others that probably aren’t useful, but it still got them. I don’t have access to Opera at the moment, but with Chrome still accepting that piece of JavaScript, I don’t see a reason why it wouldn’t accept that in your code.

Second, for @Khurram hassan, document.getElementById() can’t be used in this case. I just tested it on Chrome, and it came up with a value of null. In theory, anything with the general form of getElementsBy* as opposed to getElementBy* could probably be used in this case. So, to add to my earlier answer, you might also try ClassName , Name , and TagNameNS depending on what you’re trying to do. On the same page as before, I tested those three and while only TagNameNS worked, the rest just returned empty lists, not errors.

Further, if it is true that you don’t need in your code, perhaps you could post the working code as an edit to your answer so that we can see it. seems, to the best of my knowledge, to be the commonly accepted (and usually assumed to be mandatory) way of starting an HTML page. If it’s not necessary, then that would be new information (at least to me) that could prove useful in either debugging or non-public webpages down the road.

Читать еще:  Java thread interrupt
Ссылка на основную публикацию
Adblock
detector