[问题] 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