作者kumadesu (kuma)
看板Web_Design
標題[問題] console.log element object與預想不符
時間Sun May 27 15:55:56 2018
請各位先看以下例子
<!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://webptt.com/m.aspx?n=bbs/Web_Design/M.1527407759.A.332.html
1F：→ mirtac: console.log出來的是一個物件，當它內容改變，console會跟 05/27 16:24
2F：→ mirtac: 著變，你可以試試下中斷點一行一行執行，你會看到他改變 05/27 16:24
3F：→ mirtac: 如果你是用某些console, 他應該會出現[object] 05/27 16:28
4F：→ kumadesu: 所以說瀏覽器是的運作方式 先看完整過網頁 建構DOM 05/29 19:55
5F：→ kumadesu: 然後做完所有的指令再輸出結果? 05/29 19:55
6F：推 eight0: 這和 DOM 無關。console 渲染時你的程式已經執行完畢，那 05/29 21:21
7F：→ eight0: 時 planet 的內容已經是改變過的。如一樓所說，如果你在 05/29 21:21
8F：→ eight0: 改變之前把程式暫停，就會看到改變前的。 05/29 21:22