Javascript:Can't使用getElementById获取元素

Javascript: Can't get element using getElementById

本文关键字：使用 getElementById 获取 元素 Can Javascript      更新时间：2023-09-26

好的。我需要新鲜的眼睛，因为我还在这个问题上一个小时！

以下是我的简单HTML代码（testssio.HTML），其中包括javascript脚本：

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
        var ssio = document.getElementById('ssio');
        ssio.html = "it finally works!";
    </script>
</head>
<body>
    <div id="ssio"></div>
</body>
</html>

但它不起作用！使用调试器，我得到：

Uncaught TypeError: Cannot set property 'html' of null          /testssio/:6

有人明白吗？我知道这不是寻找调试帮助的正确地方，但如果我得不到它，我会疯的！那么，有什么帮助吗？

提前打电话。

原因是头中的脚本在页面呈现之前加载。这意味着您的内容尚未呈现，因此不属于document的一部分。

如果你想看这部作品，试着把你的脚本移到元素渲染图下面，如下所示：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="ssio"></div>
<script type="text/javascript">
    var ssio = document.getElementById('ssio');
    ssio.innerHTML = "it finally works!";
</script>
</body>
</html>

一种更标准化的方法是使用事件。很多人使用jQuery，但它可以用普通的js来完成。这意味着要像这样更改您的脚本：

<script type="text/javascript">
  function WinLoad() {
    var ssio = document.getElementById('ssio');
    ssio.innerHTML = "It finally works!";
  }
  window.onload = WinLoad;
</script>

这样，您仍然可以将其保留在<head>中。

此外，使用.html来自jQuery。它通常被用作.html(content)。如果要使用纯javascript版本，请使用.innerHTML = content。

我之所以提到jQuery，是因为它是一个使用率很高的API。此报价来自他们的网站：

jQuery是一个快速简洁的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互，以实现快速web开发。jQuery旨在改变您编写JavaScript的方式。

您的代码在加载DOM之前运行得太早，因此document.getElementById()还没有在文档中找到元素。

您可以将脚本标记向下移动到</body>标记的正前方，也可以等待DOM加载后再使用window-onload事件或DOMReady事件运行代码。

这里有两个错误。首先，您需要将SCRIPT标记放在元素之后。其次，它不是.html，而是.innerHTML

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <div id="ssio"></div>
        <script type="text/javascript">
        var ssio = document.getElementById('ssio');
        ssio.innerHTML = "it finally works!";
    </script>
</body>
</html>

您可以使用类似的东西

  <!DOCTYPE html>
    <html>
   <head>
    <script type="text/javascript">
   document.onload= function(){
    var ssio = document.getElementById('ssio');
    ssio.html = "it finally works!";
    }
</script>
</head>
<body>
<div id="ssio"></div>

相关文章：