`.getElementsByTagName()`

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

Кратко

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

Пример

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

        
          
          <html>  <head></head>  <body>    <div id="title">      <h1>Привет, незнакомец!</h1>      <p>Это параграф дочерний и для div, и для body</p>    </div>    <p>Это параграф, дочерний для body</p>    <script>      let pFromBody = document.getElementsByTagName("p")      console.log(pFromBody.length) // напечатает 2, так как поиск ведётся по всей странице      let divEl = document.getElementById("title")      // ищем параграфы внутри div:      let pFromDiv = divEl.getElementsByTagName("p")      console.log(pFromDiv.length) // напечатает 1, так как внутри div только один p      // ищем несуществующий элемент      let spanFromBody = document.getElementsByTagName("span")      console.log(spanFromBody.length) // напечатает 0    </script>  </body></html>
          <html>
  <head></head>
  <body>
    <div id="title">
      <h1>Привет, незнакомец!</h1>
      <p>Это параграф дочерний и для div, и для body</p>
    </div>
    <p>Это параграф, дочерний для body</p>
    <script>
      let pFromBody = document.getElementsByTagName("p")
      console.log(pFromBody.length) // напечатает 2, так как поиск ведётся по всей странице

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

      // ищем несуществующий элемент
      let spanFromBody = document.getElementsByTagName("span")
      console.log(spanFromBody.length) // напечатает 0
    </script>
  </body>
</html>

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

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

Как это понять

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

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

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

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

На практике

nlopin

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

🛠 Для поиска вообще всех элементов в качестве аргумента нужно передать строку '*', её называют wildcard.

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

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

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

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