логотип PurpleSchool
логотип PurpleSchool

.getElementsByTagName() в JavaScript

Автор

Дмитрий Нечаев

JavaScript предоставляет множество методов для работы с элементами на веб-странице, включая поиск элементов по тегам. Один из таких методов - .getElementsByTagName(), который позволяет получить список всех элементов с определенным тегом на странице. В этой статье мы рассмотрим, как использовать .getElementsByTagName() и какие возможности он предоставляет.

Введение в .getElementsByTagName()

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

Синтаксис .getElementsByTagName() выглядит следующим образом:

document.getElementsByTagName(tagName);

Где:

  • tagName
    • это строка, представляющая название тега, по которому нужно выполнить поиск элементов.

Примеры использования .getElementsByTagName()

Давайте рассмотрим несколько примеров использования метода .getElementsByTagName() для поиска элементов с определенным тегом на странице.

1. Получение списка всех заголовков <h1>

<h1>Заголовок 1</h1>
<h1>Заголовок 2</h1>
// Получаем все элементы с тегом "h1"
const headings = document.getElementsByTagName('h1');

// Выводим количество найденных элементов
console.log('Количество заголовков h1:', headings.length);

// Перебираем найденные элементы и выводим их содержимое
for (let i = 0; i < headings.length; i++) {
  console.log('Содержимое заголовка', i + 1, ':', headings[i].textContent);
}

В этом примере мы получаем все элементы на странице с тегом <h1> и выводим их количество и содержимое.

2. Изменение стилей всех элементов <p>

<p>Первый абзац</p>
<p>Второй абзац</p>
<p>Третий абзац</p>
// Получаем все элементы с тегом "p"
const paragraphs = document.getElementsByTagName('p');

// Применяем стили ко всем найденным элементам
for (let i = 0; i < paragraphs.length; i++) {
  paragraphs[i].style.fontWeight = 'bold';
}

В этом примере мы получаем все элементы на странице с тегом <p> и делаем их текст жирным.

Заключение

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

Стрелочка влево.getPropertyValue() в JavaScript.getElementsByClassName() в JavaScriptСтрелочка вправо

Все гайды по Javascript

Как работает метод trim() - JavaScriptКак работает метод toUpperCase() - JavaScriptКак работает метод toLowerCase() - JavaScriptКак работает метод substring() - JavaScriptКак работает метод startsWith() - JavaScriptКак работает метод split() - JavaScriptКак работает метод slice() - JavaScriptКак работает метод search() - JavaScriptКак работает метод replaceAll() - JavaScriptКак работает метод replace() - JavaScriptКак работает метод repeat() - JavaScriptКак работает метод padStart() - JavaScriptКак работает метод padEnd() - JavaScriptКак работает метод matchAll() - JavaScriptКак работает метод match() - JavaScriptКак работает метод localeCompare() - JavaScriptКак работает свойство length - JavaScriptКак работает метод lastIndexOf() - JavaScriptКак работает метод indexOf() - JavaScriptКак работает метод includes() - JavaScriptКак работает метод fromCodePoint() - JavaScriptКак работает метод fromCharCode() - JavaScriptКак работает метод endsWith() - JavaScriptКак работает метод concat() - JavaScriptКак работает метод codePointAt() - JavaScriptКак работает метод charCodeAt() - JavaScriptКак работает метод charAt() - JavaScript
Итератор в JavaScript
try...catch в JavaScriptError в JavaScript
Событие wheel в JavaScriptСобытие unload в JavaScriptСобытие touch в JavaScriptСобытие submit в JavaScriptСобытие scroll в JavaScriptСобытие reset в JavaScriptМетод .preventDefault() в JavaScriptСобытие mouseover в JavaScriptСобытие mouseout в JavaScriptСобытие load в JavaScriptСобытие keyup в JavaScriptСобытие keydown в JavaScriptСобытие invalid в JavaScriptСобытие input в JavaScriptСобытийная модель Event в JavaScriptОбъект события Event в JavaScriptСобытие DOMContentLoaded в JavaScriptСобытие dblclick в JavaScriptСобытие click в JavaScriptСобытие change в JavaScriptСобытие beforeunload в JavaScript
Как работает метод some() - JavaScriptКак работает метод reverse() - JavaScriptКак работает метод reduce() - JavaScriptКак работает метод map() - JavaScriptКак работает метод isArray() - JavaScriptКак работает метод indexOf() - JavaScriptКак работает метод includes() - JavaScriptКак работает метод from() - JavaScriptКак работает метод forEach() - JavaScriptКак работает метод flatMap() - JavaScriptКак работает метод flat() - JavaScriptКак работает метод findIndex() - JavaScriptКак работает метод find() - JavaScriptКак работает метод filter() - JavaScriptКак работает метод every() - JavaScriptМассивы в JavaScript
Открыть базу знаний