Документ: метод getElementsByTagName()

Базовая линия Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с июля 2015 года.

Метод getElementsByTagName интерфейса Document возвращает коллекцию HTMLCollection элементов с заданным именем тега.

Весь документ проверяется, включая корневой узел. Возвращаемая HTMLCollection коллекция является динамичной, что означает, что она автоматически обновляется, чтобы оставаться синхронизированной с деревом DOM, без необходимости повторного вызова document.getElementsByTagName().

Синтаксис

getElementsByTagName(name)

Параметры

name: Строка, представляющая имя элементов. Специальная строка * представляет все элементы.

Возвращаемое значение

Динамичная HTMLCollection найденных элементов в порядке их появления в дереве.

Примеры

В следующем примере getElementsByTagName() начинается с определённого родительского элемента и рекурсивно проверяет DOM сверху вниз от этого родительского элемента, создавая коллекцию всех дочерних элементов, соответствующих тегу в параметре name. Это демонстрирует как document.getElementsByTagName() , так и функционально идентичный Element.getElementsByTagName(), который начинает поиск с определённого элемента в дереве DOM.

Нажатие на кнопки использует getElementsByTagName() для подсчёта дочерних элементов абзаца определённого родителя (либо сам документ, либо один из двух вложенных <div> элементов).

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>getElementsByTagName example</title>
    <script>
      function getAllParaElems() {
        const allParas = document.getElementsByTagName("p");
        const num = allParas.length;
        alert(`There are ${num} paragraph in this document`);
      }

      function div1ParaElems() {
        const div1 = document.getElementById("div1");
        const div1Paras = div1.getElementsByTagName("p");
        const num = div1Paras.length;
        alert(`There are ${num} paragraph in #div1`);
      }

      function div2ParaElems() {
        const div2 = document.getElementById("div2");
        const div2Paras = div2.getElementsByTagName("p");
        const num = div2Paras.length;
        alert(`There are ${num} paragraph in #div2`);
      }
    </script>
  </head>
  <body style="border: solid green 3px">
    <p>Some outer text</p>
    <p>Some outer text</p>

    <div id="div1" style="border: solid blue 3px">
      <p>Some div1 text</p>
      <p>Some div1 text</p>
      <p>Some div1 text</p>

      <div id="div2" style="border: solid red 3px">
        <p>Some div2 text</p>
        <p>Some div2 text</p>
      </div>
    </div>

    <p>Some outer text</p>
    <p>Some outer text</p>

    <button onclick="getAllParaElems();">
      Show all p elements in document
    </button>
    <br />

    <button onclick="div1ParaElems();">
      Show all p elements in div1 element
    </button>
    <br />

    <button onclick="div2ParaElems();">
      Show all p elements in div2 element
    </button>
  </body>
</html>

Примечания

При вызове на HTML-документе getElementsByTagName() преобразует свой аргумент в нижний регистр перед продолжением. Это нежелательно при попытке сопоставить элементы SVG с именами в кемелевом случае в поддереве в HTML-документе. document.getElementsByTagNameNS() полезен в этом случае. См. также баг Firefox 499656.

document.getElementsByTagName() аналогично Element.getElementsByTagName(), за исключением того, что поиск охватывает весь документ.

Спецификации

Спецификация
DOM # ref-for-dom-document-getelementsbytagname①

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`getElementsByTagName`	1	12	1	5.1	1	18	4	10.1	1	1.0	4.4

См. также

Element.getElementsByTagName()
document.getElementById() для получения ссылки на элемент по его id
document.getElementsByName() для получения ссылки на элемент по его name
document.querySelector() для мощных селекторов через запросы, например, 'div.myclass'

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByTagName