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

Открываем в браузере нужную нам страницу. Открываем вкладку консоль в инструментах разработчика.

Что будем именно искать?

По стандарту HTML в документе могут быть заголовки h1, h2, h3, h4, h5, h6. Но я бы добавил от себя title.


Сперва нужно создать массив с возможными заголовками:

["h1","h2","h3","h4","h5","h6","title"]

Теперь этот массив нужно прогнать методом map().

["h1","h2","h3","h4","h5","h6","title"].map(i=>[...document.getElementsByTagName(i)])

На каждом элементе будем получать объекты HTMLCollection типа заголовка. Затем преобразуем HTMLCollection в Array.

Теперь нужно распаковать все вложенные массивы на один уровень элементов главного массива методом flat().

["h1","h2","h3","h4","h5","h6","title"].map(i=>[...document.getElementsByTagName(i)]).flat()

Для получения текстового содержимого заголовков можно ещё раз прогнать новый массив из объектов элементов. На этот раз мы будем извлекать значение свойства innerText

["h1","h2","h3","h4","h5","h6","title"].map(i=>[...document.getElementsByTagName(i)]).flat().map(i=>i.innerText)

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

["h1","h2","h3","h4","h5","h6","title"].map(i=>[...document.getElementsByTagName(i)].map(i=>i.innerText)).flat()

Поделись записью