有下面这样一段代码
<HTML>
<head>
<p id="wait" style="width:100%; height:100%; visibility:hidden;">
程序处理中, 请稍候...
</p>
<script type="text/javascript">
var wait = document.getElementById("wait");
if(wait) {
alert("wait 元素存在!");
wait.style.visibility="visible";
}
</script>
</head>
<body>
</body>
</html>
请问为啥网页一直可以显示p?而且dom树中 p 是在 body 内的,这是怎么回事儿?
alert也是一直弹出的,js寻找id为wait的 p 时,p 确实存在在 head 里面,但是它明明在 head 里面啊!怎么会跑到 body 里面去了呢?
假如说是浏览器把此 p 放进 body 里面了,是在js执行之前放进去的还是执行之后放进去的?
很纠结的一个问题,请各位解答下,非常感谢。
为啥网页一直可以显示
p
:是因为js修改了visibility
属性这个涉及到浏览器工作原理:
这种情况下,应该是浏览器在解析HTML时进行了纠错,然后生成正确的DOM树
这里有一篇很长的文章
这个问题一条一条的回答。
确切的说,p#wait 没有在 body 里面,这是很明显的啊。但是……
但是现在的浏览器很智能(很变态),head 里面只能放置固定的几个标签(这个在 w3 规范定义的),当 p 进入 head 时,浏览器自动将 p 放入到 body 里面。(类似的特性还有标签自动关闭,标签拼写错误等)