document.getElementsByTagName(«tbody»)

Команда document.getElementsByTagName("tbody") возвращает HTML-коллекцию HTML-элементов <tbody> со страницы (документа). Элементы коллекции тянут за собой всех потомков. Забор данных осуществляется в древовидном порядке, т. е. в том порядке, в котором они встречаются в разметке документа сверху вниз. Они никак не отфильтрованы и никак не структурированы.

Для удобного взаимодействия с объектом HTMLCollection его можно трансформировать в массив JavaScript и применять все методы прототипов Array.

Несколько таблиц в документе

Объект HTMLCollection может хранить несколько «тел таблиц», если в документе существует несколько таблиц. Чтобы дотянуться для какого-то одного элемента <tbody> нужно поставить квадратные скобки после выражения и внутри скобок указать желаемый индекс элемента <tbody>, который нужно получить (вернуть).

Пример

Представьте, что у нас в документе есть разметка:

<h2>Таблица № 1</h2>
<div align="center">
<table id="1">
<thead>
<tr>
<th>Голова таблицы 1</th>
<th>Голова таблицы 1</th>
</tr>
</thead>
<tbody>
<tr>
<th>Тело таблицы 1</th>
<th>Тело таблицы 1</th>
</tr>
</tbody>
</table>
</div>

<h2>Таблица № 1</h2>
<div align="center">
<table id="2">
<thead>
<tr>
<th>Голова таблицы 2</th>
<th>Голова таблицы 2</th>
</tr>
</thead>
<tbody>
<tr>
<th>Тело таблицы 2</th>
<th>Тело таблицы 2</th>
</tr>
</tbody>
</table>
</div>

<h2>Таблица № 1</h2>
<div align="center">
<table id="3">
<thead>
<tr>
<th>Голова таблицы 3</th>
<th>Голова таблицы 3</th>
</tr>
</thead>
<tbody>
<tr>
<th>Тело таблицы 3</th>
<th>Тело таблицы 3</th>
</tr>
</tbody>
</table>
</div>

Так это выглядит в браузере:

Введём команду document.getElementsByTagName("tbody")

Получили объект HTMLCollection с тремя элементами tbody - JavaScript — Получили объект HTMLCollection с тремя элементами tbody — JavaScript

Теперь мы можем обратиться к первому элементу — к первому объекту:

document.getElementsByTagName("tbody")[0]

Получили первый объект tbody на странице - JavaScript — Получили первый объект tbody на странице — JavaScript

Точно также можем обратиться к любому элементу внутри коллекции.

Ссылки

DOM стандарт на русском языке — https://efim360.ru/dom/

Читайте перевод полной версии стандарта «объектной модели документа», чтобы ознакомиться со всеми концепциями и интерфейсами.

DOM — Living Standard — https://dom.spec.whatwg.org

Читайте официальную документацию живого стандарта «объектной модели документа», чтобы быть в курсе последних изменений.

HTML — Living Standard — https://html.spec.whatwg.org/

Более подробную информацию обо всех HTML-элементах можно получить в таблице на официальной странице живого стандарта HTML — https://html.spec.whatwg.org/#elements-3