Js获取不到DOM元素问题

winner_Ch

已于 2023-06-02 22:14:49 修改

阅读量1.9k

点赞数 5

文章标签： javascript 前端 html

于 2023-06-02 22:09:28 首次发布

本文链接：https://blog.csdn.net/winner_ch/article/details/131014566

版权

前言

对于想要从事前端的开发人员来讲，使用JS操作DOM是家常便饭，但是初学者在通过document对象获取HTML的DOM元素的时候，会出现DOM元素获取不到的问题，原因是对JS的执行过程不太了解

问题描述

有这么一个需求，通过JS获取页面上的按钮，并给按钮绑定单击事件，我们会写出如下代码：

H5代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button id="btn">单击一下</button>
</body>
</html>

JS代码

index.js

(function(){
  var btn = document.getElementById('btn')
  btn.onclick = function(){
    alert(123)
  }
})()

然后再通过引入JS文件，让浏览器解析

此时，初学者会犯的错误就是将script标签放在了HTML元素的最上方，例如：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="./js/index.js"></script>  //这里放置的位置有误，解析不到DOM元素
  <button id="btn">单击一下</button>
</body>
</html>

这会导致DOM元素获取不到的问题在这里插入图片描述
可以发现拿到的是null，通过console.log(btn)打印一下，得到的也是null

(function(){
  var btn = document.getElementById('btn')
  console.log(btn); //打印调试
  btn.onclick = function(){
    alert(123)
  }
})()

解决方案

在页面所有元素加载完成后引入js文件

 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button id="btn">单击一下</button>
  <script src="./js/index.js"></script> //调整js文件引入的位置
</body>
</html>