Урок: найти автоматически добавленный tbody

Назначение

Браузер не всегда строит DOM как буквальную копию записанных тегов. На примере таблицы вы увидите, почему селектор прямых строк может не совпадать с деревом после разбора HTML.

Как это работает

Код создаёт отдельный контейнер в памяти и разбирает фиксированную короткую таблицу через innerHTML. Затем сравниваются два селектора. Это учебная разметка без пользовательских данных и без изменения видимой страницы.

Пример

const box = document.createElement("div");
box.innerHTML = "<table><tr><td>Учебное значение</td></tr></table>";
console.log(box.querySelectorAll("table > tr").length);
console.log(box.querySelectorAll("table > tbody > tr").length);
console.log(box.querySelector("table").firstElementChild.tagName);

Что должно получиться

Первый запрос возвращает 0, второй — 1, имя первого дочернего элемента таблицы — TBODY. В исходной строке этого тега не было, но HTML-парсер создал соответствующий узел.

Граница применения и частая ошибка

Такой результат относится к разбору HTML, а не к любому способу создания узлов. Ручной appendChild может построить другую структуру. Не делайте вывод о корректности документа только по тому, что браузер сумел его показать после исправлений.

Самостоятельная проверка

Сравните полученный DOM с таблицей, где tbody записан явно. Затем создайте table и tr через createElement и сравните дерево без вставки строки. Для рабочего документа выберите явную понятную структуру.

Связанные материалы

• Исходник и DOM
• Консоль
• Повторная проверка