类型错误：无法在 JavaScript 中读取 NULL 的属性“X”

作者

TypeError: 无法读取 Null 的属性（读取 ‘X’）

Solve – Cannot read property ‘click’ of Null in JavaScript

出现“无法读取 null 的属性（读取‘X’）”错误的主要原因有 3 个：

  1. 访问存储值的变量的属性null。
  2. 访问不存在的 DOM 元素的属性。
  3. 在声明 DOM 元素的 HTML 上方插入 JS 脚本标记。

无法读取 null 的属性

null如果您尝试访问存储值的变量的属性，例如不存在的 DOM 元素，则会发生错误
。

这是一个例子。

索引.js
const example = null;

// ⛔️ Uncaught TypeError: Cannot read properties of null
// (reading 'value')
example.value;

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

这是另一个例子。

索引.js
const el = null;

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

null访问值的属性

解决错误的一种方法是使用可选的链接 (?.) 运算符，例如
obj?.address?.street.

如果引用为空，可选的链接运算符将短路而不是抛出错误。

索引.js
const example = null;

console.log(example?.value); // 👉️ undefined
console.log(example?.value?.moreNested); // 👉️ undefined

如果左侧的值为空值（或），则可选链接(?.)运算符短路并返回。undefinednullundefined

您还可以

以类似的方式使用逻辑与 (&&)运算符。

索引.js
const example = null;

// 👇️ null
console.log(example && example.value && example.value.nested);

如果运算符左边的值是假的（例如null），它不会计算右边的表达式，这样可以防止抛出错误。

在访问属性之前确保 DOM 元素存在

使用 DOM 元素时，“无法读取 null 的属性（读取‘X’）”错误的发生有两个主要原因：

  1. 访问不存在的 DOM 元素的属性。
  2. 将 JS 脚本标记放在在文件中创建 DOM 元素的代码上方index.html。

getElementById()在使用该方法并向其传递一个不存在的 ID后尝试访问属性时，通常会抛出该错误
。

索引.js
const el = document.getElementById('does-not-exist');
console.log(el); // null

// ⛔️ TypeError: Cannot read properties of null (reading 'value')
console.log(el.value);

我们指定了一个id不存在的并null从该方法中获取了一个值
getElementById。

尝试访问值的属性null会导致错误。

确保您正在访问正确的 DOM 元素，并添加条件检查以确保该元素在访问其属性之前存在。

索引.js
const el = document.getElementById('not-exist');
console.log(el); // null


// ✅ Checking if the element exists before accessing property
if (el?.value) {
  console.log(el.value);
} else {
  // 👇️ this runs
  console.log('element does not exist');
}

如果变量存储orel的值，我们不会收到错误，而是短路返回并运行我们的块。nullundefinedundefinedelse

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

错误的另一个常见原因是将 JS 脚本标记放在文件中创建 DOM 元素的代码之上index.html。

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

索引.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <script src="index.js"></script>

    <!-- ⛔️ BAD - SHOULD BE ABOVE SCRIPT TAG ⛔️ -->
    <input id="first_name" value="John" />
  </body>
</html>

该index.js脚本位于input元素上方，因此它无权访问它。

索引.js
const el = document.getElementById('first_name');
console.log(el); // 👉️ null

// ⛔️ TypeError: Cannot read properties of null (reading 'value')
console.log(el.value);

在声明 HTML 元素之后，您必须将 JS 脚本移动到正文的底部。

索引.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <!-- ✅️ GOOD - HTML elements above JS script ✅️ -->
    <input id="first_name" value="John" />

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

现在您可以访问脚本input中的元素index.js。

索引.js
const el = document.getElementById('first_name');
console.log(el);

// ✅ works
console.log(el.value); // 👉️ "John"

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

结论

要解决“无法读取 null 的属性（读取‘X’）”，请确保：

  1. 您不是要访问存储值的变量的属性null
    。
  2. 您不是在尝试访问不存在的 DOM 元素上的属性。
  3. 您没有将 JS 脚本标记放在声明文件中的 DOM 元素的 HTML 上方index.html。