Console.log элемента.children показывает 0 длины, но имеет три записи при последующем раскрытии

В программировании понимание состояния ваших объектов имеет решающее значение. При использовании console.log для проверки элементов важно знать, как он отображает объекты.

console.log динамически обновляет свое отображение в зависимости от текущего состояния объекта. Первоначально, когда вы регистрируете дочерние элементы элемента (element.children), он возвращает массив длиной 0. Однако, когда вы позже разворачиваете зарегистрированный объект в консоли, он извлекает текущее состояние объекта, которое может включать три записи.

Такое поведение связано с тем, что console.log устанавливает живую ссылку на объект, а не делает снимок его состояния. Таким образом, когда состояние объекта изменяется, зарегистрированный объект отражает эти изменения в консоли.

Чтобы решить эту проблему, подождите, пока коллекции будут заполнены, прежде чем регистрировать или выполнять код. Например, если вы регистрируете дочерние элементы сразу после выполнения сценария, переместите сценарий в конец HTML-документа, прямо перед закрывающим тегом

Кроме того, используйте встроенный отладчик ваш браузер или IDE, чтобы получить более глубокое понимание состояния объекта во время выполнения. Это прольет свет на поведение объекта и поможет выявить любые проблемы.