无法读取 null 的属性（读取“getAttribute”）

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

“TypeError: Cannot read properties of null (reading ‘getAttribute’)”的发生有两个原因：

getAttribute()在null值（不存在的 DOM 元素）上调用方法。
将 JS 脚本标记放在声明 DOM 元素的 HTML 上方。

无法读取 null 的属性 getattribute

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

索引.js


const el = null;

// ⛔️ Uncaught TypeError: Cannot read properties of null (reading 'getAttribute')
el.getAttribute('id');

确保DOM元素存在

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

id该错误通常发生在向
方法提供不存在的内容之后getElementById。

索引.js


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

// ⛔️ Cannot read properties of null (reading 'getAttribute')
const id = el.getAttribute('id');

id我们向该方法传递了一个不存在的值getElementById并取回了一个null
值。

对值调用getAttribute()方法null会导致错误。

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

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

该脚本应在创建 DOM 元素后运行。

索引.html


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

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

JS 脚本标记位于声明div元素的代码上方，因此div无法从index.js文件访问该元素。

索引.js


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

// ⛔️ Cannot read properties of null (reading 'getAttribute')
const id = el.getAttribute('id');

HTML 代码是从上到下解析的，因此脚本必须放在声明 DOM 元素之后。

相反，将 JS 脚本标签移动到 body 标签的底部，在它需要访问的 DOM 元素之后。

索引.html


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

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

现在我们可以访问文件div中的元素index.js。

索引.js


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

// ✅ Works
const id = el.getAttribute('id');
console.log(id); // 👉️ box

如果该属性不存在，则该getAttribute方法返回一个null或一个空字符串。

结论

要解决“TypeError: Cannot read properties of null (reading ‘getAttribute’)”错误，请确保您id用来获取元素的方法存在于 DOM 中。

id该错误通常发生在向
方法提供不存在的内容之后getElementById。