От автора: первый из «стандартных» JavaScript селекторов, getElementsByTagName выполняет именно то, что записано в его названии – создает элементы HTMLCollection на веб-странице. Результат метода обычно записывается в переменную.
1 |
var tableHeaders = document.getElementsByTagName("th"); |
Пара замечаний: как и с getElementsByClassName, getElementsByTagName всегда записывается в множественном числе и всегда предполагается, что на странице есть несколько экземпляров данного тега (даже если элементы появляются только раз на странице, типа main)
getElementsByTagName возвращает HTMLCollection, структуру, похожую на массив, которая автоматически обновляется при любых изменениях в DOM.
Метод length покажет количество найденных элементов. В консоли:
1 2 |
tableHeaders.length; > 5 |
Также как и getElementsByClassName, getElementsByTagName работает из любого элемента на странице и собирает все дочерние элементы данного тега, подходящие под описание (не включая сам элемент). Если у нас есть элемент table с id расписаний полетов, то с помощью JS можно получить только ячейки таблицы:
1 2 |
var flightTable = document.getElementById("flights"), cells = flightTable.getElementsByTagName("td"); |
Или в одну строку:
1 |
var cells = document.getElementById("flights").getElementsByTagName("td"); |
С getElementsByTagName работает универсальный селектор (*), с помощью которого можно собрать все элементы со страницы.
getElementsByTagName всегда конвертирует аргумент в нижний регистр перед поиском на странице, что приводит к проблемам при поиске элементов SVG в горбатом регистре, вставленных в документ. Для этих целей используйте getElementsByTagNameNS.
document.body
И наконец, есть элемент, который можно получить напрямую без использования каких-либо JS селекторов: с помощью document.body можно получить мгновенный доступ к корневому тегу body.
Источник: //thenewcode.com/
Редакция: Команда webformyself.