要素があるのにgetElementsByClassNameのlengthが0になってしまう？？

Question

要素があるのにgetElementsByClassNameのlengthが0になってしまう？？

環境

ruby 2.5.1

rails 6.0.3.2

質問

let deleteAnchors=document.getElementsByClassName('deleteAnchor');
console.log(deleteAnchors); //crhomeの検証をみるかぎり、HTMLCollectionがあり、lengthも２になっています。
console.log(deleteAnchors.length); //なぜか０になる？？

上のようなコードで、lengthが何故０になるのかわかる方いらっしゃいますでしょうか？
この後に続くforが動かずに困っています。

はじめは何故forが動かないのかわからなかったのですが、

for(let i=0;i<deleteAnchors.length;i++){...}

色々調べるとlengthが0になっていることがわかりました。

forを動かしたいので、なんとかlengthが得られる方法をお教えください。
よろしくお願いいたします。

Comments

[m.ts10806]

JavaScriptだけではなんとも言えません。

[tomtomtomtom]

ご返答ありがとうございました。

[m.ts10806]

質問は編集できますので適宜加筆修正してください。

Answer 1

タイミングの問題、ということはありませんか？

getElementsByClassNameが返すHTMLCollectionは動的なものなので、あとから該当するクラスの要素が現れれば、自動的に追加されます。

console.log(deleteAnchors.length);を行った時点では本当に0個で、その後追加された、というような状況も考えられます。

Comments

[maisumakun]

ブラウザのデバッグツールも、オブジェクトを出力した場合に、出力した瞬間ではなく、「詳細を見ようと展開した瞬間」の状態を反映することがあります。

[tomtomtomtom]

ご返答、わかりやすい説明をありがとうございました。

[tomtomtomtom]

うわあああ
こちらの方は総合１位！！
ありがとうございましたm(-_-)m

Answer 2

HTMLCollectionは後からの変更にも反応してしまうことがあるので
確実性をあげるなら以下のようにしてください

window.addEventListener('DOMContentLoaded', ()=>{
let deleteAnchors=document.getElementsByClassName('deleteAnchor');
console.log(deleteAnchors);
console.log(deleteAnchors.length);
});

Comments

[yambejp]

HTMLCollectionとNodeListの挙動の違いの例

<script>
window.addEventListener('DOMContentLoaded', ()=>{
var n1=document.getElementsByClassName('deleteAnchor');
var n2=document.querySelectorAll('.deleteAnchor');
document.querySelector('body').appendChild(document.querySelector('.deleteAnchor').cloneNode(true));
console.log([n1.length,n2.length]);//[3,2]
});
</script>
<div class="deleteAnchor">1</div>
<div class="deleteAnchor">2</div>

[tomtomtomtom]

ご返答、わかりやすい説明をありがとうございました。
コードまで書いてくださり感謝いたします。

[tomtomtomtom]

こちらで一度試してみようと思います。
誠にありがとうございました。

[tomtomtomtom]

気づきませんでしたが総合２位！！！
ありがとうございましたm(-_-)m