JavaScript 执行顺序与 DOM 操作时机详解

JavaScript 执行顺序与 DOM 加载时机

JavaScript 的代码默认按照自上而下的顺序执行。除非进行特殊设置，否则脚本不会等待整个页面加载完成后再开始运行。例如，假设网页中包含如下 HTML 结构：

<div id="ele">welcome to www.jb51.net</div>

若在上述 HTML 代码之前插入以下 JavaScript 脚本：

<script type="text/javascript">
document.getElementById('ele').innerHTML= 'welcome to my blog';
</script>

运行页面时，浏览器会抛出错误信息：“document.getElementById(‘ele') is null。”这是因为当 JavaScript 执行时，ID 为 'ele' 的 DOM 元素尚未在页面上生成。

解决 DOM 未加载错误的两种方案

针对此问题，有两种常见的解决方法：

1. 将 JavaScript 代码移至 HTML 结构之后：

<div id="ele">welcome to www.jb51.net</div>
<script type="text/javascript">
document.getElementById('ele').innerHTML='welcome to my blog';
</script>

使用 jQuery 的 ready 方法

2. 确保在网页完全加载后再执行 JavaScript。传统做法是在 HTML 的 body 标签中添加“onload="load()"”属性，并在 load() 函数中调用相关脚本。这里重点介绍使用 jQuery 的实现方式：

<script>
$(document).ready(function(){
document.getElementById('ele').innerHTML= 'welcome to my blog';
});
</script>
//此外，既然已引入 jQuery，更简洁的写法如下：
<script>
$(document).ready(function(){
$('#ele').html('welcome to my blog'); //此处亦可使用 .text() 方法
});
</script>

将上述 jQuery 代码置于页面的任意位置，它都会等待页面加载完成后才执行。