Какими способами можно получить элемент html страницы

Как получить элемент в JS

Для того, чтобы производить какие-либо манипуляции с элементами HTML-страницы, необходимо их сперва получить. Сегодня мы научимся получать элементы в JS по тегу и классу.

Получить элемент по тегу

Задача 1: Получить все параграфы по тегу p.

Переменной p присвоим все найденные параграфы на странице и выведем результат в консоль.

// Получить элементы по имени тега
let p = document.getElementsByTagName(‘p’);
console.log(p);

Программа вывела в консоли коллекцию HTMLCollection, собирающая элементы по тегу, в виде массива (похожая на массив, но не массив) c тремя параграфами внутри, к каждому из которых можно обращаться через индекс (числа в квадратных скобках).

Мы получили возможность обратиться к нужному нам параграфу без создания отдельного класса или идентификатора.

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

Задача 2: Получить содержимое тега div по классу.

Для наглядности, мы создали один div с классом any и второй обычный блок.

Переменной div присвоим все найденные на странице элементы с классом any и выведем результат в консоль.

// Получить элементы по имени класса
let div = document.getElementsByClassName(‘any’);
console.log(div);

Как и ожидалось, программа проигнорировала обычный div и вывела в массиве только div с классом, так и должно быть.

HTMLCollection коллекция

HTMLCollection представляет себя псевдомассив элементов, который возвращают в виде объекта, метод getElementsByTagName(). Что у неё общего с массивом? Это возможность в цикле методом перебора обращаться к элементам через индекс (порядковый номер), однако в HTML коллекции нельзя использовать методы массива, такие как pop(), push() или join().

Какая польза от HTML коллекции?

У HTMLCollection есть замечательное свойство length. Свойство length показывает, сколько элементов находится в коллекции. Что это значит на практике? Например, я хочу при клике по кнопке, изменить цвет всех параграфов. Как заставить отработать событие onclick все теги, учитывая, что их количество может меняться?

Обращение ко всем элементам

Задача 3: Изменить цвет у всех элементов при клике.

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

HTML код

JavaScript код

Цикл for запускает счетчик (переменная i) от 0 до максимального значения длины (свойство length), с каждым новым разом, переменная i увеличивается на единицу и так продолжается до тех пор, пока счетчик i в процессе прирастания на единицу, остается меньше длины length.

function colorFunction() <
let pCollection = document.getElementsByTagName(«p»);
let i;
for (i = 0; i

Персональное обращение к элементам

Задача 4: Изменить цвет только у второго параграфа при клике.

Здесь, мы конкретно обращаемся, через нумерованный индекс (число в квадратных скобках), ко второму элементу коллекции.

function colorFunction() <
let pCollection = document.getElementsByTagName(«p»);
pCollection[1].style.backgroundColor = «pink»;
>

У второго параграфа при клике, изменился цвет.

Итоги

Знания о том, как получить элементы в JS, являются – базовыми при создании эффектов или приданию динамики у веб-сайтов.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 1 ):

Здравствуйте! у меня есть вопрос. Как вывести значение переменной в нескольких местах. К примру в переменной хранится дата и время публикации.

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Copyright © 2010-2021 Русаков Михаил Юрьевич. Все права защищены.

Источник

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

Учебник JavaScript

Практика

Работа с DOM

Практика

Некоторые продвинутые вещи

Рекомендованное ES6

Некоторые видео могут забегать вперед, тк к этому месту учебника мы прошли еще не весь ES6. Просто пропускайте такие видео, посмотрите потом.

Регулярки

Разное

Работа с канвасом

Практика

Контекст

Drag-and-Drop

• Урок №
  Введение
  в ООП в стиле ES6
• Урок №
  Основы
  работы с ООП
• Урок №
  Наследование
  классов в JavaScript
  Продвинутая работа
  с классами на JavaScript —>
• Урок №
  Применение
  ООП при работе с DOM
• Урок №
  Практика
  по ООП в JavaScript
• Тут скоро будут еще уроки
  по функциональному и прототипному
  стилю ООП.

Практика по ООП

Ваша задача: посмотрите, попробуйте повторить.

Практика

Promise ES6

Библиотека jQuery

Тк. jQuery устаревает, объявляю эти уроки не обязательными и выношу в конец учебника (так по уровню уроки середины учебника, если что). В перспективе переедет в отдельный учебник по jq.

В данном уроке мы разберем работу с элементами страницы на языке JavaScript.

Работа с innerHTML, outerHTML

В прошлом уроке мы с вами учились считывать и записывать значения атрибутов, а теперь будем делать тоже самое, но уже со внутренним содержимым тегов. Это делается с помощью свойства innerHTML, которое можно считывать и перезаписывать, меняя тем самым содержимое тегов.

В примере ниже у нас есть абзац. Давайте сменим ему текст с помощью свойства innerHTML. Для этого получим ссылку на этот абзац с помощью getElementById в переменную elem. Затем таким образом — elem.innerHTML = ‘Новый текст’ — запишем в него новый текст:

HTML код станет выглядеть так:

Можно записывать не только текст, но и теги и они будут работать (в нашем случае текст станет жирным):

HTML код станет выглядеть так:

Кроме свойства innerHTML существует также свойство outerHTML, которое перезаписывает не только внутренний текст тега, но и сам тег. Смотрите пример:

HTML код станет выглядеть так:

Как вы видите, наш абзац исчез и заменился на тег b.

Работа с getElementsByTagName

Во всех примерах выше мы с вами работали с методом getElementById, который получал только одно свойство по его атрибуту id. Однако существуют и другие способы получения свойств, к примеру, с помощью метода getElementsByTagName, который получает группу тегов по их имени. Например, можно получить все абзацы p или все заголовки h2.

Учтите только один нюанс — наш метод возвращает не одно свойство, а массив свойств. Получим, к примеру, все абзацы в переменную elems:

В переменной elems теперь лежит массив свойств, это значит, что elems[0] — это первый абзац, elems[1] — второй и так далее (нумерация с нуля).

Мы можем убедится в этом, если сделаем так: elems[0].innerHTML = ‘!’ — в этом случае первый абзац сменит свой текст.

Давайте поменяем текст всех трех абзацев:

HTML код станет выглядеть так:

Учтите, что менять одновременно все свойства как-нибудь так elems.innerHTML = ‘!’ не получится (потому что elems — массив). Необходимо или вручную перебрать все свойства, как это сделано в примере выше, или воспользоваться циклом.

В следующем примере мы сменим содержимое всех абзацев на страницы на ‘!’, воспользовавшись для этого циклом for:

HTML код станет выглядеть так:

Обращение к свойствам через свойства document

Некоторые теги страницы можно не получать методами типа getElementById, а обратиться к ним как свойствам объекта document. К примеру, к тегу можно обратиться так: document.body, а к тегу — вот так: document.head. Такое работает не для всех тегов, а только для избранных.

Учтите, что нельзя получить доступ к тому свойству, которого еще не существует в момент выполнения скрипта. Поэтому, если скрипт находится в , то в нем недоступен document.body.

В следующем примере первый alert выведет null:

Работа с формами

Можно получить все HTML формы на странице через document.forms. В результате мы получим массив форм, будто он был получен с помощью getElementsByTagName (точнее это будет не массив, а псевдомассив (или коллекция) свойств).

Мы можем, к примеру, обратиться к любой форме, как к энному свойству массива, например, к форме с номером 0:

HTML код станет выглядеть так:

А можем перебрать все формы с помощью цикла:

HTML код станет выглядеть так:

Следующем образом — document.forms[i].elements — можно найти общее количество форм на странице.

Кроме того, к формам можно обращаться по имени вместо номера. Это имя задается в атрибуте name тега

Источник

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

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

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

Часто в JavaScript необходимо проводить определенные манипуляции с HTML элементами.

Чтобы это сделать, сначала нужно найти требуемый элемент. Найти HTML элемент можно несколькими способами:

• по идентификатору id
• по имени тега
• по имени класса
• по селекторам CSS
• по наборам объектов HTML

Поиск HTML элемента по идентификатору

Самый простой способ найти HTML элемент в DOM — это использовать его идентификатор id.

В следующем примере мы ищем элемент с id=»intro»:

Если элемент будет найден, то он будет возвращен в виде объекта (в переменную myElement).

Если элемент не будет найден, то в переменная myElement будет содержать значение null.

Поиск HTML элемента по имени тега

В следующем примере мы ищем все элементы

В следующем примере сначала происходит поиск элемента с id=»main», а затем всех элементов

Поиск HTML элемента по имени класса

Если нужно найти все HTML элементы с одним и тем же именем класса, то используют метод getElementsByClassName().

В следующем примере возвращается список всех элементов с атрибутом class=»intro»:

Внимание! Поиск элементов по имени класса не работает в Internet Explorer 8 и более ранних версиях.

Поиск HTML элемента по CSS селекторам

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

В следующем примере возвращается список всех элементов

Внимание! Метод querySelectorAll() не работает в Internet Explorer 8 и более ранних версиях.

Поиск HTML элемента по наборам HTML объектов

В следующем примере производится поиск элемента формы с атрибутом в наборе объектов forms, и отображаются все значения элементов:

Также доступны следующие HTML объекты (и наборы объектов):

Источник

Получение элементов со страницы — Методы getElementById, getElementsByTagName и getElementsByClassName

Здесь мы будем использовать JavaScript для работы c веб-страницей.

Как получать элементы со страницы?

Это начало важной темы . Здесь формируется понимание того, как работает JavaScript.

При этом первым делом нужно знать, что такое DOM — Объектная модель документа. Об этом далее.

DOM — Объектная модель документа

О том, что такое DOM — Объектная модель документа — читайте здесь.

Итак, веб-страница — это некий документ , который имеет определенную структуру. И когда документ (страница) существует, то к нему можно обратиться как к объекту . Отсюда и название Объектная модель документа.

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

Глобальный объект document

Чтобы обратиться к DOM используется объект document — это глобальный объект веб-страницы. Это и есть сама страница.

Об объекте document — читайте здесь и немного здесь (для лучшего понимания).

Если набрать в консоли браузера document. то мы увидим список всех свойств и методов глобального объекта document, которые можно использовать применительно к веб-странице.

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

Это ссылка на архив с исходными файлами.

Методы для получения элементов с веб-страницы

Методы для получения элементов с веб-страницы можно разделить на 2 категории :

1) Это методы которые существуют уже давно. Они будут рассмотрены на этой странице.

2) Методы которые появились относительно недавно. О них читайте здесь.

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

1) Это методы которые существуют уже давно. Они будут рассмотрены далее.

2) Методы которые появились относительно недавно.

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

Метод getElementById — Выборка по id

Метод getElementById существуют уже давно и отвечает за выбор элемента страницы по id идентификатору.

Напомним, что id-идентификатор уникален и может быть только один на странице.

Дополнительно о методе getElementById читайте здесь.

Пример 1.1

Результат в консоли

В результате мы видим элемент страницы — это блок div с id=»box» . Так работает метод getElementById. Это довольно простой метод.

Метод getElementsByTagName — Выборка по имени тега

Рассмотрим примеры того, как работает метод getElementsByTagName.

Метод getElementsByTagName существуют уже давно и отвечает за выбор элементов страницы по имени тега.

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

Дополнительно о методе getElementsByTagName читайте здесь.

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

Пример 2.1

Результат в консоли

В результате мы получили HTMLCollection (HTML-коллекцию): псевдомассив из элементов button — из 5-ти кнопок.

Как получить доступ к конкретному элементу — к конкретной кнопке?

Для этого нужно обратиться к ней как к элементу массива .

Продолжим работать с html-кодом из примера 2.1.

И получим доступ ко 2-ой кнопке , то есть к элементу массива с индексом 1 .

Пример 2.2

Результат в консоли

Это был первый способ: на этапе формирования запроса при помощи метода getElementsByTagName, было указано, к какому элементу псевдомассива, мы хотим получить доступ.

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

Пример 2.3

Результат в консоли

Здесь мы с начала сформировали псевдомассив , сделав выборку всех кнопок. И после этого указали, какая кнопка (какой элемент массива) нас интересует.

Что если на странице будет один элемент/один тег? В данном случае — одна кнопка (один тег button). Что в этом случае возвращает метод getElementsByTagName?

Пример 2.4

Результат в консоли

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

Важно усвоить этот момент .

Следует понимать, как работает метод getElementsByTagName.

В реальной практике метод getElementsByTagName используется редко .

Метод getElementsByClassName — Использование классов

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

Метод getElementsByClassName существуют уже давно и отвечает за выбор элементов страницы по имени класса.

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

Продолжим работать с кодом из примера 2.1 и сделаем выборку всех элементов с классом circle .

Пример 3.1

Результат в консоли

В результате выборки по классу мы получили HTMLCollection (HTML-коллекцию): псевдомассив из 3-х элементов страницы — это теги div с классом circle .

Здесь была рассмотрена работа трех методов, предназначенных для получения элементов в веб-страницы: getElementById, getElementsByTagName и getElementsByClassName.

Далее читайте о получении элементов по CSS селектору : это методы queryselectorall и queryselector .

Источник