Question

A）

<!doctype html>
   <html>
        <head>
            <title>An example for object method</title>
            <script src= "js/test.js"></script>
        </head>
        <body>
            <h3>Here is an example for object method</h3>
            <p id = "demo"></p>
         
       </body>
</html>

b）中

<!doctype html>
 <html>
     <head>
         <title>An example for object method</title>
        
     </head>
     <body>
         <h3>Here is an example for object method</h3>
         <p id = "demo"></p>
         <script src= "js/test.js"></script>
     </body>
</html>

加载网页时这两个代码块会有何不同？第一个块没有加载JavaScript文件，而第二个块运行正常。

Answer 1

在第二个代码段中，js/test.js代码在HTML加载之后才会运行。这允许它直接访问DOM中的任何内容。例如，如果该脚本执行var obj = document.getElementById("demo");，它将返回演示DOM对象。

在第一个代码段中，js/test.js运行时页面的HTML尚不可用。如果脚本执行var obj = document.getElementById("demo");，它将返回null，因为该DOM对象尚未可用（尚未加载）。

请参阅此答案（pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it）以深入讨论此主题，并在第一个选项中选择如何制作代码＆＃34;等待＆＃34;执行直到DOM准备就绪。

以下两个代码段有什么区别？

1 个答案: