无法从脚本中找到元素

我试图从JavaScript获取DOM元素。即使ID是正确的，getElementId似乎无法找到它;我在Chrome得到无法从脚本中找到元素

TypeError: Cannot read property 'innerHTML' of null

，或者

TypeError: x is null

在Firefox只使用下面的简单代码

。为什么是这样？

<!DOCTYPE html> 

<html> 
    <head> 
     <script> 
      var x = document.getElementById("myHeader"); 
      alert(x.innerHTML); 
     </script> 
    </head> 
    <body> 
     <h1 id="myHeader">Click me!</h1> 
    </body> 
</html>

来源

2010-04-26 Dennis D

还是把它留在<head>，但它包装在一个函数并调用它，当<body>加载

<!DOCTYPE HTML PUBLIC "-//W3C/DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/tdt/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<script type="text/javascript"> 
<!-- 
    function init(){ 
     var x=document.getElementById("myHeader"); 
     alert(x.innerHTML); 
    } 

//--> 
</script> 
</head> 
<body onload="init();"> 

<h1 id="myHeader">Click me!</h1> 

</body> 
</html>

来源

2010-04-26 21:48:11

使用内联属性事件处理程序不被认为是最佳实践。直接指定一个函数会更清晰 - 'window.onload = function（）{...}' – friedo 2010-04-26 21:51:54

由于<script>标签是<head>标签内，它运行的身体被分析之前，所以myHeader元素还不存在。

您需要将<script>块放在<body>标记的末尾。

来源

2010-04-26 21:47:34 SLaks

- 或 - 将整个shabang放在'document.onLoad'函数中。 – dclowd9901 2010-04-26 21:54:44

移动你的脚本的底部在这种情况下，像这样：

<!DOCTYPE HTML PUBLIC "-//W3C/DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/tdt/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
</head> 
<body>  
<h1 id="myHeader">Click me!</h1>  
<script type="text/javascript"> 
<!-- 
    var x=document.getElementById("myHeader"); 
    alert(x.innerHTML); 
//--> 
</script> 
</body> 
</html>

目前，它的执行的元素存在之前，所以它的示数，因为它没有找到任何东西，x是不确定的。在正文结尾处运行脚本将解决此问题。

来源

2010-04-26 21:47:57

的问题是，此刻的你叫getElementById功能的DOM还没有完成加载但，因此不存在元素myHeader。当DOM完成加载时，您需要执行此代码。例如：

window.onload = function() { 
    var x = document.getElementById("myHeader"); 
    alert(x.innerHTML); 
};

如果你使用流行的jQuery框架，你的代码可能是这样的：

$(function() { 
    var x = $("#myHeader"); 
    alert(x.html()); 
});

，它会与大多数浏览器。

另一种选择是把你的script刚刚闭幕的body标记之前：一旦你的脚本开始执行myHeader元素就已经被加载

<h1 id="myHeader">Click me!</h1> 

<script type="text/javascript"> 
<!-- 
    var x=document.getElementById("myHeader"); 
    alert(x.innerHTML); 
//--> 
</script> 
</body>

由于DOM加载顺序。

来源

2010-04-26 21:48:36

在加载HTML之前，您的脚本正在运行。将脚本移到底部或延迟执行，直到页面加载完毕。

此外，您永远不需要使用来隐藏脚本。没有什么可以隐藏起来的

来源

2010-04-26 21:48:39

你觉得浏览器会在点击标题后调用你的代码吗？您需要将提醒（某物）提取到某个功能中，例如

function hello(){ 
    alert("hello world"); 
}

和h1元素添加的onClick = “你好（）”属性。

来源

2010-04-26 21:49:47 Axarydax

他并没有试图做出点击事件。 – SLaks 2010-04-26 21:50:06

我只是认为“点击我！”标题足够描述，OP正在尝试点击它来做某件事。方式做一个红色的按钮，说“推我”，但操作实际上是由远程传感器控制，杜 – Axarydax 2010-04-27 06:14:53

这不起作用，因为浏览器在看到它时立即执行脚本，这是之前您的h1标记被解析并添加到DOM。

您可以将<script>标记放在yoru文档的末尾，但更好的方法是通过将警报放在窗口的onload处理程序中来推迟执行。

如果您有兴趣使用像jQuery框架，它提供了类似ready事件。

来源

2010-04-26 21:50:10 friedo

无法从脚本中找到元素

回答

相关问题