DOM加载

最新推荐文章于 2024-05-31 00:35:54 发布

丨小确幸丨

最新推荐文章于 2024-05-31 00:35:54 发布

阅读量362

点赞数

分类专栏： javascript 文章标签： dom

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

      使用HTML DOM文档的难点之一在于，如果JavaScript代码在DOM完全载入之前执行，有可能会产生很多问题。实际上，浏览器内部操作的顺序如下：
       1) 解析HTML
       2) 载入外部样式表
       3) 按照解析文档时的结果执行脚本
       4) 构建好完整的HTML DOM
       5) 载入图片以及外部内容
       6) 页面载入完成
       当然，实际的执行顺序会依赖于HTML的结构。
之所以要求把<script>标签放在<body>的闭合标签前，一方面是因为如果把<script>标签放在文档头部或者采用外部文件形式载入，都有可能导致这两处的脚本无法访问DOM，代码演示见实例1；另一方面则是因为<script>标签中的JavaScript代码会阻断页面的渲染，浏览器无法在JavaScript正在运行时加载页面。

实例1：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>
        Script-TAG TEST
    </title>
    <script>
        var pElem = document.getElementById('test');
        alert(pElem);
        pElem.innerHTML = "I'm changing my content.";
    </script>
</head>
<body>
<div>
    <p id="test">Test Content.</p>
</div>
</body>
</html>

运行该段代码，会出现如下结果。但是用户期望的是打开浏览器后，弹出获取到的元素类型。点击确认后显示修改后的文本内容。所以这里来看显然是不符合用户期待的。把<script>标签放在<\body>前便可以解决这些问题。
当script标签在头部时，无法获得<body>中的元素，即使写出了代码，获取元素的结果也会返回null