search

Home  >  Q&A  >  body text

javascript - 关于HTML文档<head>内放显示元素的问题

有下面这样一段代码

<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执行之前放进去的还是执行之后放进去的？

很纠结的一个问题，请各位解答下，非常感谢。
大家讲道理大家讲道理2901 days ago297

reply all(2)I'll reply

  • 黄舟

    黄舟2017-04-10 14:31:34

    为啥网页一直可以显示p：是因为js修改了visibility属性
    这个涉及到浏览器工作原理：

    下面是渲染引擎在取得内容之后的基本流程：
    解析html以构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树

    这种情况下，应该是浏览器在解析HTML时进行了纠错，然后生成正确的DOM树
    这里有一篇很长的文章

    reply
    0
  • PHP中文网

    PHP中文网2017-04-10 14:31:34

    这个问题一条一条的回答。

    确切的说，p#wait 没有在 body 里面，这是很明显的啊。但是……

    但是现在的浏览器很智能（很变态），head 里面只能放置固定的几个标签（这个在 w3 规范定义的），当 p 进入 head 时，浏览器自动将 p 放入到 body 里面。（类似的特性还有标签自动关闭，标签拼写错误等）

    reply
    0
  • Cancelreply