JavaScript | Как получить значение заголовка H1 на HTML-странице?

JavaScript | Как получить значение заголовка H1 на HTML-странице?

У нас есть какая-то страница сайта. Она открыта в браузере. Мы хотим при помощи языка JavaScript получить текстовое значение заголовка H1. Как это сделать?

 

Решение

Нужно для начала обратиться ко всему документу (объект document). Затем у документа нужно отыскать всех потомков, которые имеют имя тега h1. После этого нужно конвертировать HTML-коллекцию в обычный массив и далее обратиться к первому элементу массива и его свойству innerText или textContent.

[...document.getElementsByTagName("h1")][0].innerText

или

[...document.getElementsByTagName("h1")][0].textContent

Пример на случайном сайте.

Заголовок H1 на HTML-странице и в инструментах разработчика - JavaScript
Заголовок H1 на HTML-странице и в инструментах разработчика — JavaScript

 

Переходим на вкладку Console (Консоль) и начинаем вводить наши команды.

Получили значение заголовка H1 через свойства innerText и textContent - JavaScript
Получили значение заголовка H1 через свойства innerText и textContent — JavaScript

 

Зачем мы обращались к первому элементу массива?

Метод getElementsByTagName() при любом раскладе возвращает массив. Если элементы не будут найдены, то массив будет пустым. Если будет найден один элемент, то массив будет иметь длину 1. Если больше, то больше.

Идея заключается в том, что при правильном оформлении HTML-страницы разработчик должен учитывать наличие всего ОДНОГО заголовка h1. Так SEO определяет уникальность заголовков и их страниц по всему сайту. В идеальном мире одна страница сайта, должна иметь один заголовок h1.

Но когда за разработку сайта берутся криворукие программисты, тогда на HTML-странице могут появиться НЕСКОЛЬКО заголовков h1. И у вас уже должен быть правильный сценарий поведения при таких ситуациях. Имейте это ввиду.

 

Информационные ссылки

Стандарт DOM — https://dom.spec.whatwg.org

Стандарт DOM русская версия

Стандарт HTML — https://html.spec.whatwg.org