console.log de element.children montre 0 longueur mais a trois entrées lorsqu'il est développé plus tard

Question

Dans mon javascript, j'ai deux éléments.

Je suis connecté les deux éléments et il montre ...

élément 1.

élément 2.

Il y a problème.

Quand je console.log le element s .children ils reviennent évidemment une HtmlCollection s

Vous comprendrez ce que les moyens suivants en une minute: Mais la chose étrange est que l'un HTMLCollection est vide (et a une longueur de 0), mais a 3 éléments (et a une longueur de 3).

Si vous lisez les console.log s ci-dessous pour les enfants des éléments, vous comprendrez ce que je parle ...

Élément 1 enfant & Longueur:

Élément 2 enfants & longueur: (le foiré un)

Quelqu'un a-t-il une idée de ce qui se passe ici?

Comment puis-je résoudre ce problème, j'ai besoin de boucler la HtmlCollection, mais elle ne me le laissera pas parce que la longueur est 0 ...?

Merci d'avance! Toute aide appréciée.

Answer 1

Lorsque vous enregistrez des objets sur la console, l'état actuel de l'objet n'est pas snapshotted et affiché (comme vous pouvez vous y attendre); à la place, la console obtient une référence en direct à l'objet. Lorsque vous développez dans la console, vous voyez son contenu à lorsque vous développez, pas à partir de quand vous l'avez connecté. Plus à ce sujet dans this question and its answers. Donc, apparemment, vos collections sont vides lorsque vous faites votre journalisation, et ensuite récupérer leurs éléments plus tard. Vous voulez juste que votre code attende que les collections soient remplies. Par exemple, si vous le faites immédiatement lorsque votre script est exécuté, pensez à placer le script à la fin du document, juste avant la balise </body> de fermeture.

Le très subtile bleu (i) l'icône à côté de l'objet a une info-bulle qui est utile; si vous survolez ce que vous voyez:

Il dit « valeur de l'objet à gauche a été shapshotted lorsque vous êtes connecté, la valeur ci-dessous a été évaluée en ce moment."