Question

我正在尝试学习JavaScript ..而且我正在尝试按照示例...而且我无法让这个getElementById正常工作......为什么它在警告框中而不是实际段落中表示Null ？

<html>
  <head>    
    <script type="text/javascript">
    var x = document.getElementById('excitingText');
    alert(x);
   </script>  
  </head>

  <body>
    <h1>This is a header!</h1>
    <p id="excitingText">
      This is a paragraph! <em>Excitement</em>!
    </p>
    <p>
      This is also a paragraph, but it is not nearly as exciting as the last one.
    </p>

  </body>

</html>

Answer 1

执行时

var x = document.getElementById('excitingText');
    alert(x);

页面未完成加载。把它放在window.onload里面或放在页面的末尾就可以了。尝试：

window.onload = function() {
      var x = document.getElementById('excitingText');
                alert(x);
 }

或者把它放在最后。但最好把它放在window.onload内。

<html>
  <head>    

  </head>

  <body>
    <h1>This is a header!</h1>
    <p id="excitingText">
      This is a paragraph! <em>Excitement</em>!
    </p>
    <p>
      This is also a paragraph, but it is not nearly as exciting as the last one.
    </p>
   <script type="text/javascript">
    var x = document.getElementById('excitingText');
    alert(x);
   </script>  
  </body>

</html>

Answer 2

这是因为您的脚本在元素存在之前加载。因此，请尝试将其放在window.onload下，以确保在加载DOM后执行它。或者将其移至页面末尾，例如 this 。

试试这个：

 window.onload = function() {
      var x = document.getElementById('excitingText');
                alert(x);
 }

Fiddle

Answer 3

在将元素放入DOM之前，您正在使用该元素的引用。将相同的代码放在＆＃34; $（document）.onload（）＆＃34;并将工作

$(document).onload(function(){
     var x = document.getElementById('excitingText');
     alert(x);
});

Answer 4

您也可以在：

中使用相同的内容

 $(document).ready(function(e) {
      var x = document.getElementById('excitingText');
      alert(x); 
 });

它与其他方法相同，只是另外一种方式。

getElementbyID，有人可以告诉我为什么这不起作用？

4 个答案:

Fiddle