JavaScript селектори: getElementsByTagName

15

Від автора: перший з «стандартних» 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.