Від автора: перший з «стандартних» JavaScript селекторів, getElementsByTagName виконує саме те, що записано в його назві – створює елементи HTMLCollection на веб-сторінці. Результат методу зазвичай записується в змінну.
var tableHeaders = document.getElementsByTagName(“th”);
Пара зауважень: як і з getElementsByClassName, getElementsByTagName завжди записується в множині і завжди передбачається, що на сторінці є кілька екземплярів даного тега (навіть якщо елементи з’являються лише раз на сторінці, типу main)
getElementsByTagName повертає HTMLCollection, структуру, схожу на масив, яка автоматично оновлюється при будь-яких змінах в DOM.
Метод length покаже кількість знайдених елементів. В консолі:
tableHeaders.length;
> 5
Також як і getElementsByClassName, getElementsByTagName працює з будь-якого елемента на сторінці і збирає всі дочірні елементи даного тега, що підходять під опис (не включаючи сам елемент). Якщо у нас є елемент table id розкладів польотів, то за допомогою JS можна отримати лише клітинки таблиці:
var flightTable = document.getElementById(“flights”),
cells = flightTable.getElementsByTagName(“td”);
Або в один рядок:
var cells = document.getElementById(“flights”).getElementsByTagName(“td”);
З getElementsByTagName працює універсальний селектор (*), за допомогою якого можна зібрати всі елементи зі сторінки.
getElementsByTagName завжди конвертує аргумент в нижній регістр перед пошуком на сторінці, що призводить до проблем при пошуку елементів SVG у горбатому регістрі, вставлених у документ. Для цих цілей використовуйте getElementsByTagNameNS.
document.body
І нарешті, є елемент, який можна отримати безпосередньо без використання яких-небудь JS селекторів: з допомогою document.body можна отримати миттєвий доступ до кореневого тегу body.
