4

我正在学习 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>脚本下方时脚本不能正常工作，以及在执行过程中会发生什么？谢谢你。

4

3 回答 3

3

因为 JavaScript 在浏览器遇到它时运行，在编译/渲染页面时；不是一旦完成渲染页面。因此，如果元素出现在JavaScript 运行时script它不（尚未）存在。

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

<script>
    function bodyLoaded(){
        document.getElementById('p1').innerHTML = 'New text!';
    }
</script>
<body onload="bodyLoaded()">
    <!-- HTML here... -->
    <p id="p1"></p>
</body>
于 2013-11-02T22:49:42.037 回答
2

Javascript是一种解释型语言。“解释”意味着它：

“直接执行指令，无需事先将程序编译成机器语言指令”

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

于 2013-11-02T23:03:38.193 回答
1

必须定义元素才能让 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。

于 2013-11-02T22:53:38.300 回答