[問題] console.log element object與預想不符

看板Web_Design作者 (kuma)時間6年前 (2018/05/27 15:55), 編輯推噓1(107)
留言8則, 3人參與, 6年前最新討論串1/1
請各位先看以下例子 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Plants</title> </head> <body> <h1>Green Planet</h1> <p id="greenplanet">All is well</p> <h1>Red Planet</h1> <p id="redplanet">Nothing to report</p> <h1>Blue Planet</h1> <p id="blueplanet">All systems A-OK</p> <script> var planet = document.getElementById("greenplanet"); console.log(planet.innerHTML); console.log(planet); //why is not <p id="greenplanet">All is well</p> planet.innerHTML = "Red Alert: hit by phaser fire!"; console.log(planet.innerHTML); </script> </body> </html> 我的問題是就在注解那裡 第二句console.log 在innerHTML之前 當我使用console.log不應是出現 <p id="greenplanet">All is well</p> 嗎 為什麼會出現<p id="greenplanet">Red Alert: hit by phaser fire!</p>? -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 210.6.146.71 ※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1527407759.A.332.html

05/27 16:24, 6年前 , 1F
console.log出來的是一個物件,當它內容改變,console會跟
05/27 16:24, 1F

05/27 16:24, 6年前 , 2F
著變,你可以試試下中斷點一行一行執行,你會看到他改變
05/27 16:24, 2F

05/27 16:28, 6年前 , 3F
如果你是用某些console, 他應該會出現[object]
05/27 16:28, 3F

05/29 19:55, 6年前 , 4F
所以說瀏覽器是的運作方式 先看完整過網頁 建構DOM
05/29 19:55, 4F

05/29 19:55, 6年前 , 5F
然後做完所有的指令再輸出結果?
05/29 19:55, 5F

05/29 21:21, 6年前 , 6F
這和 DOM 無關。console 渲染時你的程式已經執行完畢,那
05/29 21:21, 6F

05/29 21:21, 6年前 , 7F
時 planet 的內容已經是改變過的。如一樓所說,如果你在
05/29 21:21, 7F

05/29 21:22, 6年前 , 8F
改變之前把程式暫停,就會看到改變前的。
05/29 21:22, 8F
文章代碼(AID): #1R2cIFCo (Web_Design)