Что не так делаю в скрипте JS — ошибка promise, и др.?

Question

[Максим К]

Всем привет. Есть условный сайт www.****.ru, для него делаю плагин по сбору информации.
На сайте есть таблица, конечно все это "рендерится".
При выполнении кода получаю ошибку:

ошибка in promise TypeError: cannot read properties of null (reading 'rows')

1. Вариант:

function sleep(ms) {
	return new Promise(resolve => setTimeout(resolve, ms));
}

sleep(2000).then(()=>{
	let arr = []; // создание пустого массива	
	let countDATA = document.querySelector("body > table > tbody").rows.length;   //тут ошибка
	console.log(countDATA ); // получение кол-ва строк
	
циклом прохожу по DOM дереву и собираю данные в массив
for (let i=0; i < countDATA ; i++){
let a1  =  'body >  table > tbody > tr:nth-child(' 
let a2    = i   //переменная для перебора элементов
let a3    = ') > td> div > a'

arr.push(document.querySelector(a1+a2+a3).innerHTML);
}

for(let i=0; i<arr.length; i++){console.log(arr[i]);}
});

Вариант 2:
тоже, что и вариант 1 только через document.addEventListener("DOMContentLoaded", ready); , но тут вообще ничего в консоль не выводит

document.addEventListener("DOMContentLoaded", ready);
function ready()  {
	let arr = []; // создание пустого массива	
	let countDATA = document.querySelector("body > table > tbody").rows.length;   //тут ошибка
	console.log(countDATA ); // получение кол-ва строк
	
циклом прохожу по DOM дереву и собираю данные в массив
for (let i=0; i < countDATA ; i++){
let a1  =  'body >  table > tbody > tr:nth-child(' 
let a2    = i   //переменная для перебора элементов
let a3    = ') > td> div > a'

arr.push(document.querySelector(a1+a2+a3).innerHTML);
}

for(let i=0; i<arr.length; i++){console.log(arr[i]);}

Если код выполнять просто в консоли по очереди так:

1. тут все ок, получаю значение

let countDATA = document.querySelector("body > table > tbody").rows.length;   
	console.log(countDATA );

2. Такой код тоже работает, т.е. берет innerHTML

let arr = [];
let a1  =  'body >  table > tbody > tr:nth-child(' 
let a2    = 1  //   любая цифра
let a3    = ') > td> div > a'

console.log(document.querySelector(a1+a2+a3).innerHTML);

}

Подскажите, что делаю не так??? Пытаюсь параллельно изучать книгу "Выразительный JS", сталкивался с такими конструкция, но как решить мою, пока не понимаю. СПАСИБО

Comments

[Сергей delphinpro]

Очевидно, на момент работы кода document.querySelector("body > table > tbody") возвращает null. То есть таблица в body отсутствует.

[Максим К]

Rise, да, описал как смог, т. к. Конкретно на чем сделан не скажу

Answer 1

[Moses Fender]

Чтобы ошибок не получалось, проверять нужно. Очевидно, по описанию ошибки, что таблицы нет (она is null).

let table = document.querySelector("body > table > tbody");
if(table instanceof HTMLTableSectionElement){
    let countDATA = table.rows.length;
}

Comments

[Максим К]

Спасибо

[Сергей delphinpro]

Достаточно добавить всего один символ

-let countDATA = document.querySelector("body > table > tbody").rows.length;
+let countDATA = document.querySelector("body > table > tbody")?.rows.length;