Question

我正在尝试使用document.querySelector（）定位图像，但这给我一个错误，提示TypeError：document.querySelector（...）为空

这是我的代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Step 1</title>
    <style>
    #image1{

    }
    </style>
    <script>
     document.querySelector('#image1').addEventListener("click",myFunction);
  // addEventListener(event, function, useCapture)
      function myFunction(){
        alert("alert on click");
      }
    </script>
  </head>
  <body>
    <img src="images/image1.jpg" id="image1" />
  </body>
</html>

Answer 1

DOMContentLoaded

当初始HTML文档已完全加载和解析而没有等待样式表，图像和子帧完成加载时，将引发DOMContentLoaded事件。完全不同的事件加载应仅用于检测页面已满。在DOMContentLoaded更合适的地方使用负载是一个非常常见的错误，所以要谨慎。

您的脚本在DOM准备就绪之前正在运行。您必须使用DOMContentLoaded包装代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Step 1</title>
    <style>
    #image1{

    }
    </style>
    <script>
      document.addEventListener("DOMContentLoaded", function(event) {     
        document.querySelector('#image1').addEventListener("click",myFunction);
        // addEventListener(event, function, useCapture)
        function myFunction(){
          alert("alert on click");
        }
      });
    </script>
  </head>
  <body>
    <img src="images/image1.jpg" id="image1" />
  </body>
</html>

如何解决TypeError：document.querySelector（...）为null？

1 个答案: