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>

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

Три простых таблицы на HTML-странице
Три простых таблицы на HTML-странице

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

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

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

document.getElementsByTagName("tbody")[0]
Получили первый объект tbody на странице - JavaScript
Получили первый объект tbody на странице — JavaScript

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

Ссылки

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

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

DOMLiving Standardhttps://dom.spec.whatwg.org

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

HTMLLiving Standard https://html.spec.whatwg.org/

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

 

Поделись записью