同樣HTMLCollection為何一邊有查到長度，另一邊則沒有?

javascript html php jquery

alanotmt 2022-08-26 15:42:23 ‧ 1014 瀏覽

分享至

以下是我的codepen:
https://codepen.io/alanotmt/pen/gOeJvXK

在codepen裡console.log(add_bb)
他會顯示

[object HTMLCollection]{
"0":{}
"1":{}
"2":{}
"3":{}
"4":{}
"5":{}
"6":{}
"7":{}
"8":{}
"9":{}
"10":{}
}

我console.log(add_bb.length) 答案會是 11

但是我同樣的code在 xampp上跑在網頁上按F12 看我console
卻得到這樣的結果:

HTMLCollection []
0: button.btnself.remove-button
1: button.btnself.remove-button
2: button.btnself.remove-button
3: button.btnself.remove-button
4: button.btnself.remove-button
5: button.btnself.remove-button
6: button.btnself.remove-button
7: button.btnself.remove-button
8: button.btnself.remove-button
9: button.btnself.remove-button
10: button.btnself.remove-button
length: 11
[[Prototype]]: HTMLCollection
data_setting.js:6 0

我console.log(add_bb.length) 答案會是 0
為什麼同樣的code 得出來的結果不一樣?

alanotmt iT邦新手 4 級 ‧ 2022-08-26 17:37:23 檢舉

後來發現不同地方在script 的後面是否增加了async

在 <script> 加上 async 屬性後，與 defer 相同的是會在背景執行下載，但不同的是當下載完成會馬上暫停 DOM 解析（若尚未解析完的話），並開始執行 JavaScript。也因為下載完成後會立即執行，加上 async 屬性後，就無法保證執行順序了。

登入發表討論