Метод getElementsByTagName() в JavaScript
Метод getElementsByTagName
в JavaScript
позволяет находить элементы на странице по названию их тега. Это очень удобно, если нужно работать с группой однотипных элементов, например, всеми <p>
, <div>
, <input>
и так далее.
document.getElementsByTagName('div');
//вернет все дивки со страницы
Метод возвращает HTMLCollection
— живую коллекцию элементов, которые соответствуют указанному тегу. Если элементы добавятся или удалятся из DOM
, коллекция автоматически обновится.
Если таких элементов на странице нет, метод вернёт пустую коллекцию.
Запуск поиска всех параграфов на странице:
let paragraphs = document.getElementsByTagName('p');
console.log(paragraphs); // Выведет коллекцию всех <p>
Замена стилей для всех кнопок на странице:
let buttons = document.getElementsByTagName('button');
for (let button of buttons) {
button.style.background = 'gray'; // Все кнопки станут серыми
}
Достучимся до первого <h1>
тега на странице:
let heading = document.getElementsByTagName('h1')[0];
heading.textContent = 'Новый заголовок!';
Метод getElementsByTagName
прекрасно подойдет если нужно быстро получить все элементы определённого тега. Однако если требуется статичный список или сложные селекторы, лучше использовать querySelectorAll