Клавиша / esc

.getElementsByTagName()

Получаем список элементов с искомым тегом.

Время чтения: меньше 5 мин

Кратко

Скопировано

Метод определён для объекта document и любого HTML-элемента (Element) страницы. Позволяет найти все элементы с заданным тегом среди дочерних. Возвращает похожую на массив HTMLCollection с найденными элементами. Если элементов не нашлось, то коллекция будет пустая, то есть с размером 0.

Пример

Скопировано

Метод принимает один параметр — название тега в виде строки. Например, <div>, <form>, <h5>.

        
          
          <body>  <div id="title">    <h1>Привет, незнакомец!</h1>    <p>Это параграф, дочерний и для div, и для body</p>  </div>  <p>Это параграф, дочерний для body</p></body>
          <body>
  <div id="title">
    <h1>Привет, незнакомец!</h1>
    <p>Это параграф, дочерний и для div, и для body</p>
  </div>
  <p>Это параграф, дочерний для body</p>
</body>

        
        
          
        
      
        
          
          const pFromBody = document.getElementsByTagName('p')console.log(pFromBody.length)// 2const divEl = document.getElementById('title')// Ищем параграфы внутри <div>const pFromDiv = divEl.getElementsByTagName('p')console.log(pFromDiv.length)// 1, так как внутри <div> только один <p>// Ищем несуществующий элементconst spanFromBody = document.getElementsByTagName('span')console.log(spanFromBody.length)// 0
          const pFromBody = document.getElementsByTagName('p')
console.log(pFromBody.length)
// 2

const divEl = document.getElementById('title')
// Ищем параграфы внутри <div>
const pFromDiv = divEl.getElementsByTagName('p')
console.log(pFromDiv.length)
// 1, так как внутри <div> только один <p>

// Ищем несуществующий элемент
const spanFromBody = document.getElementsByTagName('span')
console.log(spanFromBody.length)
// 0

        
        
          
        
      

Динамический пример, в котором поиск ведётся по кликнутому блоку:

Открыть демо в новой вкладке

Как понять

Скопировано

Метод работает с DOM, который связан с HTML-разметкой. Каждый HTML-элемент имеет родительские и дочерние элементы.

  • Родительские элементы — это элементы, внутри которых находится элемент. В примере выше у элемента <h1> есть два родительских элемента — <div> и <body>.
  • Дочерние элементы — это элементы, которые содержит текущий элемент. Они могут быть, а могут не быть. Например, для тега <body> все элементы страницы дочерние. У <h1> дочерний элемент — текст внутри тега.

Если работаете с корнем страницы, объектом document, поиск идёт по всем элементам страницы, то есть от <body>. Если от конкретного элемента, поиск идёт только по его дочерним элементам.

Так как мы заранее не знаем, сколько элементов с искомым тегом найдётся, метод возвращает коллекцию элементов.

На практике

Скопировано

Николай Лопин советует

Скопировано

🛠 Поиск по тегам нужен нечасто.

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

Открыть демо в новой вкладке

🛠 Будьте аккуратны, когда пишете циклы над HTMLCollection. Так как коллекция живая, цикл может стать бесконечным в тех случаях, когда на странице добавляются и удаляются подходящие под поиск элементы.

🛠 Скрипты, которые работают с HTML, видят только ту разметку, которую уже распарсил браузер. Браузер парсит HTML сверху вниз. Если скрипт находится вверху страницы, он не найдёт элементы ниже — браузер их ещё не увидел и ничего о них не знает. Поэтому либо скрипты подключают в конце страницы, либо подписываются на событие DOMContent​Loaded, которое сигнализирует о том, что браузер распарсил весь HTML.