console.log для element.children показывает 0 длины, но имеет три записи при расширении позже

В моем javascript у меня есть два элемента.

Я зарегистрировал два элемента, и это показывает...

Элемент 1.

введите описание изображения здесь

Элемент 2.

введите описание изображения здесь

Есть проблема.

Когда я console.log elements.children они, очевидно, возвращают некоторые HtmlCollections

Через минуту вы поймете, что означает следующее: Но странно то, что одна коллекция HtmlCollection пуста (и имеет длину 0), но имеет 3 элемента (и имеет длину 3).

Если вы прочтете console.log ниже для дочерних элементов элементов, вы поймете, о чем я говорю...

Элемент 1 дети и длина:

введите описание изображения здесь

Детский элемент 2 и длина: (испорченный)

введите описание изображения здесь

Кто-нибудь знает, что здесь происходит?

Как мне это исправить, мне нужно пройти через HtmlCollection, но это не позволит мне, потому что длина равна 0...?

Заранее спасибо! Вся помощь приветствуется.


javascript html htmlcollection
person David Callanan    schedule 29.07.2016    source источник
comment
Можете ли вы создать jsfiddle или сделать соответствующий исходный код доступным, пожалуйста.   -  person NewToJS    schedule 29.07.2016

Ответы (1)


arrow_upward
36
arrow_downward

Когда вы записываете объекты в консоль, текущее состояние объекта не фиксируется и не отображается (как вы могли бы ожидать); вместо этого консоль получает действующую ссылку на объект. Когда вы разворачиваете его в консоли, вы видите его содержимое на момент разворачивания, а не на момент входа в систему. Подробнее об этом читайте в этом вопросе и ответах на него.

Таким образом, очевидно, что ваши коллекции пусты, когда вы ведете журнал, а затем получаете их элементы позже. Вы просто хотите, чтобы ваш код ждал, пока коллекции не будут заполнены. Например, если вы делаете это сразу после запуска скрипта, подумайте о том, чтобы поместить скрипт в конец документа, прямо перед закрывающим тегом </body>.

У очень тонкого синего значка (i) рядом с объектом есть полезная подсказка; если вы наведете его, вы увидите:

Подсказка о том, что значение объекта слева было снято при регистрации, значение ниже было оценено только что.

В нем говорится, что значение объекта слева было снято при регистрации, значение ниже было оценено только что.

Но в целом: вместо того, чтобы спотыкаться в темноте с console.log фонариком, я предлагаю включить свет с помощью отладчика, встроенного в ваш браузер и/или IDE.

person T.J. Crowder    schedule 29.07.2016
comment
Спасибо за помощь! Я не понимал, что это вызывается, прежде чем я добавлял элементы в html (через jscript) - person David Callanan; 29.07.2016
comment
Но как мы можем получить фактическую длину массива. т.е. оцененная длина - person Mangesh Daundkar; 14.11.2018
comment
@MDM - Вопрос в том, оценивается когда? Когда вы регистрируете это? Или позже, когда вы посмотрите на объект в консоли? Если вам нужна длина на момент регистрации, введите arr.length. Если вы захотите позже, когда вы расширите массив в консоли, посмотрите на свойство length в отображении расширенного массива. - person T.J. Crowder; 14.11.2018
comment
@MangeshDaundkar вы можете регистрировать список дочерних узлов клонированного дубликата узла DOM, сделанного в момент вызова: console.log(el.cloneNode(true).children). Клон живет вне документа (пока не будет добавлен где-то), и у вас будет единственная ссылка на него, поэтому ничто не сможет его изменить. - person myf; 23.11.2020
comment
Я тоже столкнулся с подобными проблемами при получении элементов dom в реакции, затем, чтобы противостоять этому, я использовал функцию setTimeout с небольшим интервалом времени, чтобы доступ к элементу dom был возможен только после его рендеринга. - person vaibhav naik; 26.01.2021
comment
@vaibhavnaik - это не имеет никакого отношения к тому, отображается ли элемент DOM. Только то, что состояние могло измениться между тем, когда вы регистрируете его, и тем, когда вы расширяете его в журнале. - person T.J. Crowder; 26.01.2021
comment
@ T.J.Crowder Итак, каков идеальный способ использовать его в реакции. Является ли мой обходной путь плохим кодом? - person vaibhav naik; 26.01.2021
comment
@vaibhavnaik - Просто знайте, что означает такое поведение. Если вам нужно знать значение свойства объекта на момент его регистрации, регистрируйте свойство, а не объект в целом. Если вы регистрируете объект целиком, опять же, просто имейте в виду, что то, что вы видите позже, когда смотрите, это то, что «там» когда вы смотрите, а не когда вы это записывали. Но мой общий совет таков: вместо того, чтобы спотыкаться в темноте с console.log фонариком, включите свет с помощью отладчика, встроенного в ваш браузер и/или IDE. :-) - person T.J. Crowder; 26.01.2021