JS - 元素在body.onload后依然为空

Question

根据this question，在调用body onload的时候，文档中的所有对象都在DOM中，并且所有图像和子帧都已完成加载。

我有一些JS应该在body onload时触发，但是我的尝试getElementByID正在返回null，这让我觉得它比我想的要早。

我错了我对body.onload的解释还是我在做别的事呢？

这里是我的代码：

<script type="text/javascript"> 
    window.document.body.onload = doStuff; 

    function doStuff() { 
     var txtElement = document.getElementById("myTextField"); 

     if (txtElement != null) { 
      alert(txtElement.value); 
     } 
     else { 
      alert("Element not found!"); //This alert is always thrown 
     } 
    } 
</script> 

Answer 1

你实际上是调用doStuff功能之前加载的DOM，因为你的函数名，这将导致该函数被作为线一旦被调用后的括号遇到。

当你注册一个函数作为事件的回调函数时，你只想引用该函数，而不是调用它。另外，您只需要在window上注册“页面”load功能。

变化：

window.document.body.onload = doStuff(); 

到：

window.onload = doStuff; 

---

此外，您应该现代化您的代码和，而不是使用元素的事件属性（只允许一个功能作为事件的回调来存储），您应该使用方法来注册回调函数。

最后，type属性不再需要script标记。

<script> 
    window.addEventListener("load", doStuff); 

    function doStuff() { 
     var txtElement = document.getElementById("myTextField"); 

     if (txtElement != null) { 
      alert(txtElement.value); 
     } 
     else { 
      alert("Element not found!"); //This alert is always thrown 
     } 
    } 
</script>