一些有趣的Useless小实验

一、假如HTML中出现两个<body>会怎么样?

我尝试在HTML中加入两个<body>,给它们各自的id,观察下在浏览器中会变成什么样,再用js分别输出一下。

为了方便,js直接写到HTML中了。

代码如下:

<body id="bd1">
    <h1>hello!</h1>
    <h2>adasdasdasdasd</h2>
</body>
<body id="bd2">
    <h1>hello!</h1>
    <p>dsasflasnldasdlasdn</p>
</body>
<script>
    var bd1 = document.getElementById('bd1');
    var bd2 = document.getElementById('bd2');
    console.dir(bd1);
    console.dir(bd2);
</script>

在Chrome Elements中查看结果,非常有趣:

body1.png

可以看到,第二个<body>直接消失了,子标签按照之前的顺序并到了一起。

并且还有一个小彩蛋,放在<body>外面的<script>被拖进了<body>里。说明一下,就算正常只有一个<body>,在浏览器处理时外面的<script>也会被拖进去

Console输出如下:

body2.png

bd2彻底消失,就是个null

测试下其他浏览器,包括safari、ff、Opera,处理方式都是一样的。

待续~



评论

暂无评论

在这里输入