GetElementsByTagName: примеры (JAVASCRIPT)

Примеры использования

Базовый пример

Поиск всех элементов с тегом 'p':

let paragraphs = document.getElementsByTagName('p');
console.log(paragraphs.length);

Количество найденных параграфов: 5

Поиск внутри элемента

Поиск элементов только внутри конкретного контейнера:

let container = document.getElementById('content');
let links = container.getElementsByTagName('a');
console.log(links.length);

Количество ссылок в контейнере: 3

Использование специального значения '*'

Получение всех элементов документа:

let allElements = document.getElementsByTagName('*');
console.log(allElements.length);

Всего элементов на странице: 42

Альтернативные методы в JavaScript

querySelectorAll

Метод document.querySelectorAll() возвращает статическую коллекцию NodeList. Позволяет использовать CSS-селекторы для более сложных запросов.

getElementsByClassName

Метод getElementsByClassName() возвращает живую коллекцию элементов по имени класса.

getElementById

Метод getElementById() возвращает один элемент по его уникальному идентификатору.

Рекомендации по выбору

getElementsByTagName оптимален при работе с однотипными элементами в динамически меняющемся DOM. querySelectorAll предпочтительнее для сложных CSS-селекторов и когда требуется статическая коллекция.

Типичные ошибки

Обращение к элементам как к массиву

let divs = document.getElementsByTagName('div');
divs.forEach(function(div) {  // Ошибка!
  console.log(div);
});

TypeError: divs.forEach is not a function

Решение: преобразовать в массив или использовать цикл for.

Игнорирование регистра в XML документах

// В XML документах поиск чувствителен к регистру
let elements = xmlDoc.getElementsByTagName('DIV'); // Не найдет 'div'

Ожидание статической коллекции

let divs = document.getElementsByTagName('div');
let initialCount = divs.length;
document.body.innerHTML += '<div>Новый элемент</div>';
console.log(divs.length === initialCount);

false (коллекция живая и изменилась)

Изменения в современных версиях

Метод getElementsByTagName() остается стабильным и не претерпел значительных изменений в последних версиях JavaScript. Основные изменения касаются среды выполнения:

• В современных браузерах метод работает одинаково как в HTML, так и в XML документах
• Улучшена производительность при работе с большими DOM-деревьями
• Коллекция HTMLCollection теперь имеет метод values() для итерации в современных браузерах

Спецификация WHATIG DOM Living Standard поддерживает обратную совместимость метода.

Расширенные примеры

Обработка всех элементов определенного типа

let inputs = document.getElementsByTagName('input');
for (let input of inputs) {
  if (input.type === 'checkbox') {
    input.checked = true;
  }
}

Создание индекса по тегам

let tagIndex = {};
let allElements = document.getElementsByTagName('*');
for (let elem of allElements) {
  if (!tagIndex[elem.tagName]) {
    tagIndex[elem.tagName] = [];
  }
  tagIndex[elem.tagName].push(elem);
}

Поиск в iframe

let iframe = document.getElementById('myFrame');
let iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
let iframeLinks = iframeDoc.getElementsByTagName('a');

Комбинирование с другими методами

// Получение всех изображений внутри статьи
let article = document.querySelector('article');
let images = article ? article.getElementsByTagName('img') : [];

// Фильтрация по атрибуту
let externalImages = [];
for (let img of images) {
  if (img.src.startsWith('http')) {
    externalImages.push(img);
  }
}

Работа с SVG элементами

let svgElements = document.getElementsByTagName('svg');
if (svgElements.length > 0) {
  let circles = svgElements[0].getElementsByTagName('circle');
  // SVG элементы имеют свои особенности
}

Аналоги в других языках

PHP: SimpleXML и DOMDocument

$xml = simplexml_load_file('file.xml');
$elements = $xml->xpath('//tagname');

$dom = new DOMDocument();
$dom->loadHTML($html);
$elements = $dom->getElementsByTagName('div');

Python: BeautifulSoup

from bs4 import BeautifulSoup
soup = BeautifulSoup(html, 'html.parser')
elements = soup.find_all('p')

MySQL: XPath

SELECT ExtractValue(xml_data, '//tagname') FROM documents;

C#: XmlDocument

XmlDocument doc = new XmlDocument();
doc.LoadXml(xml);
XmlNodeList nodes = doc.GetElementsByTagName("element");

Основное отличие JavaScript реализации - возвращаемая живая коллекция, которая автоматически синхронизируется с DOM.