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

作者: kumadesu (kuma)   2018-05-27 15:55:56
請各位先看以下例子
<!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>?
作者: mirtac (mirtac)   2018-05-27 16:24:00
console.log出來的是一個物件,當它內容改變,console會跟著變,你可以試試下中斷點一行一行執行,你會看到他改變如果你是用某些console, 他應該會出現[object]
作者: kumadesu (kuma)   2018-05-29 19:55:00
所以說瀏覽器是的運作方式 先看完整過網頁 建構DOM然後做完所有的指令再輸出結果?
作者: eight0 (欸XD)   2018-05-29 21:21:00
這和 DOM 無關。console 渲染時你的程式已經執行完畢,那時 planet 的內容已經是改變過的。如一樓所說,如果你在改變之前把程式暫停,就會看到改變前的。

Links booklink

Contact Us: admin [ a t ] ucptt.com