您的位置：首页 > Web前端 > JavaScript

JavaScript程序顺序执行导致的HTML标签无法引用

2016-10-27 09:02 423 查看
在用JavaScript对HTML文档中标签进行操作时,有时会出现对文档中标签无法引用的问题.比如：



图1

图1中,变量e1和e2分别对id为"element"的p标签进行引用,但实际运行时会出现下述问题,如图2所示：



图2

图2中, e1变量未引用到目标标签,而e2标签引用到了目标标签.

那么,这类问题如何解决呢?主要有两种解决方法

第1种,把引用变量的script标签放到待引用目标标签后(见图1的e2引用部分);

第2种,为window对象添加'load'事件的监听器,如图3所示.



图3

运行结果如图4所示.



图4

图3中,由于为window对象添加了'load'事件的监听器,
指定了在HTML文档载入(load)后调用eventWindowLoaded函数.于是,在图4的运行结果中,e1引用到了id为"element"的元素,实现了正常引用.而e2部分的script标签在id为"element"的标签后,所以仍然能够实现正常引用.

但这里需要特别注意的是,e2的引用是先于e1的引用的,这是为什么呢?如果按照JavaScript程序顺序执行的特点,e1部分代码本身在e2部分代码的上面,肯定应该先于执行,可控制台的记录结果为什么是反的呢?这其中的原因主要是由于e2部分script标签嵌入到body标签,所以作为了HTML文档的一部分共同载入(load).而当HTML载入("load")事件,
即window对象载入完成后,才会调用e1部分的eventWindowLoaded监听函数.

有兴趣的可以把e2部分scipt标签与id为"element"的p标签更换下上下位置,再看看效果.

下面是完整代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<script>
window.addEventListener('load', eventWindowLoaded, false);
function eventWindowLoaded() {
var e1 = document.getElementById("element");
console.log("e1: " + e1);
}
</script>
</head>
<body>
<p id="element"></p>
<script>
var e2 = document.getElementById("element");
console.log("e2: " + e2);
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript html标签无法引用
相关文章推荐
新的分享
章节导航