使用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>
前便可以解决这些问题。