Question

我正在尝试从JavaScript获取DOM元素。尽管ID是正确的，getElementId似乎无法找到它;我得到了

TypeError：无法读取null
的属性'innerHTML'

Chrome中的

或

TypeError：x为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>

Answer 1

由于<script>标记位于<head>标记内，因此它会在解析正文之前运行，因此myHeader元素尚不存在。

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

Answer 2

或者将其保留在<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>

Answer 3

问题是，在您调用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：

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

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

当脚本开始执行后，DOM会按顺序加载，{}}元素已经加载。

Answer 4

在这种情况下将脚本移动到底部，如下所示：

<!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未定义。在正文末尾运行脚本将解决此问题。

Answer 5

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

此外，您永远不需要使用来隐藏您的脚本。

没有什么可以隐藏的

Answer 6

您认为浏览器在点击标题后如何调用您的代码？你需要将警报（某物）提取到一个函数中，例如

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

和h1元素添加 onClick =“hello（）”属性。

Answer 7

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

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

如果您对使用jQuery这样的框架感兴趣，它会提供类似的ready事件。

无法从脚本中找到元素

7 个答案: