无法在 JS 中读取 null 的属性（读取“classList”）

无法在 JS 中读取 null 的属性（读取 ‘classList’）

TypeError: Cannot read property ‘classList’ of Null in JS

出现“无法读取 null 的属性（读取‘classList’）”错误的原因有两个：

访问值classList的属性null（不存在的 DOM 元素）。
将 JS 脚本标记放在声明 DOM 元素的 HTML 上方。

无法读取 null 的属性类列表

下面是错误如何发生的示例。

索引.js


const box = document.getElementById('does-not-exist');
console.log(box); // 👉️ null

// ⛔️ Uncaught TypeError: Cannot read properties of null (reading 'classList')
box.classList.add('bg-green-400');

我们试图访问导致错误的值classList的属性。null

访问前确保DOM元素存在`classList`

确保您用来获取 DOM 元素的 id 有效并且
存在于 DOM 中。

id当向方法提供无效时，通常会发生错误getElementById()
。

索引.html


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <!-- 👇️ id should match with JS code -->
    <div id="box">Hello</div>

    <script src="index.js"></script>
  </body>
</html>

DOM 元素的id应该与您在方法调用中传递的标识符相匹配document.getElementById()。

将JS脚本标签放在body标签的底部

将 JS 脚本标签放在 body 标签的底部。

JS脚本标签应该在声明 HTML 元素之后运行。

索引.html


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <!-- ⛔️ BAD - script runs before div is created ⛔️ -->
    <script src="index.js"></script>

    <div id="box">Hello</div>
  </body>
</html>

该index.js脚本在创建 HTML 元素之前运行，因此我们无法访问文件中的 HTML 元素index.js。

索引.js


const box = document.getElementById('box');
console.log(box); // 👉️ null

// ⛔️ Cannot read properties of null (reading 'classList')
box.classList.add('bg-green-400');

相反，您应该将script标签放在 body 标签的底部，在它需要访问的所有 DOM 元素之后。

索引.html


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div id="box">Hello</div>

    <!-- ✅ GOOD - div already exists ✅️ -->
    <script src="index.js"></script>
  </body>
</html>

现在可以在文件内部访问divwith idof了。boxindex.js

索引.js


const box = document.getElementById('box');
console.log(box); // 👉️ div#box

// ✅ works
box.classList.add('bg-green-400');

HTML 代码是从上到下解析的，所以我们必须将 script 标签放在 body 标签的底部，在它需要访问的所有 DOM 元素之后。

结论

尝试访问classList某个null值的属性时，会出现“无法读取 null 的属性（读取‘classList’）”错误。

要解决该错误，请确保在创建 HTML 后加载 JS 脚本标记并且元素id的存在于 DOM 中。