Question

我正在学习javascript并研究这个例子：

<html>
 <body>

  <p id="p1">Hello World!</p>

  <script>
   document.getElementById("p1").innerHTML="New text!";
  </script>

 </body>
</html>

我的问题是，当<p id="p1">Hello World!</p>的行位于脚本之下时，脚本能够正常运行，以及执行过程中会发生什么？谢谢。

Answer 1

因为JavaScript在浏览器遇到它时运行，所以编译/渲染页面时;一旦完成呈现页面，不。因此，如果元素在之后出现，则script它不会（尚）存在于运行JavaScript的位置。

但是，您可以创建一个函数，并在元素加载后运行该函数，例如：

<script> function bodyLoaded(){ document.getElementById('p1').innerHTML = 'New text!'; } </script> <body onload="bodyLoaded()">  <p id="p1"></p> </body>

Answer 2

必须定义元素才能让JavaScript识别它们。如果您选择将JavaScript放在<head>标记内，则可以使用window.onload事件执行此操作。这可以通过多种方式完成。

//Obtrusive JavaScript
<html>
  <head>
    <script>
      function loadMe(){
        var doc = document;
        function E(e){
          return doc.getElementById(e);
        }
        E('p1').innerHTML = 'New text!';
      }
    </script>
  </head>
<body onload='loadMe'>
  <p id='p1'>Hello World!</p>
</body>
</html>
/* Unobtrusive JavaScript ---> the way you should learn it in my opinion
   Notice there's no onload attribute in the body tag. Also, I use onload
   instead of window.onload, because window is implicit, just as document
   is a property of window as well.
*/
<html>
  <head>
    <script>
      onload = function(){
        var doc = document;
        function E(e){
          return doc.getElementById(e);
        }
        E('p1').innerHTML = 'New text!';
      }
    </script>
  </head>
<body>
  <p id='p1'>Hello World!</p>
</body>
</html>

当然，您应该尽可能使用外部JavaScript。

Answer 3

Javascript是一种解释性语言。 '解释'意味着它：

"executes instructions directly, without previously compiling a program into machine-language instructions"

因此，因为javascript解释器逐行执行页面上的指令（从页面顶部开始），所以定义代码的顺序至关重要。因此，在您的示例中，在调用getElementById之前，要定义段元素。

当该元素低于脚本标记时，为什么javascript不能通过id获取元素？

3 个答案: