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

来源：互联网发布：淘宝上买安眠药暗语编辑：程序博客网时间：2024/05/29 15:24

在用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>

0 0