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

作者

目录

Cannot read property ‘querySelector’ of Null in JavaScript

  1. 无法读取 null 的属性（读取“querySelector”）
  2. 无法读取 null 的属性（读取“querySelectorAll”）

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

“无法读取 null 的属性（读取‘querySelector’）”错误的发生有两个原因：

  1. querySelector()在null值（不存在的 DOM 元素）上调用方法。
  2. 在声明 DOM 元素的 HTML 上方插入 JS 脚本标记。

无法读取 null 的属性查询选择器

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

索引.js
const element = null;

// ⛔️ Uncaught TypeError: Cannot read properties of null (reading 'querySelector')
const box = element.querySelector('#box');

这是另一个例子。

索引.js
const el = undefined;

// ⛔️ Uncaught TypeError: Cannot read properties of undefined (reading 'querySelector')
const box = el.querySelector('#box');

在调用之前确保 DOM 元素存在querySelector

id选择 DOM 元素时，请确保您使用的是正确的。

id该错误通常在向方法提供无效后发生getElementById
。

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

// ⛔️ Cannot read properties of null (reading 'querySelector')
const box = element.querySelector('#box');
id我们为该方法提供了一个不存在的值getElementById ，因此我们得到了一个null值。对值调用方法会导致错误。 querySelector()null

如果您收到错误“无法读取未定义的属性（读取‘querySelector’）”，您可能使用了该getElementsByClassName方法。

索引.js
const elements = document.getElementsByClassName('does-not-exist');
console.log(elements); // 👉️ []

// ⛔️ Cannot read properties of undefined (reading 'querySelector')
const box = elements[0].querySelector('#box');

我们向该方法传递了一个不存在的类名getElementsByClassName，因此我们得到了一个空的类数组对象。

尝试访问超出范围的索引处的数组，返回一个undefined
值并在一个值上调用该querySelector方法undefined会导致错误。

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

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

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

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

    <div id="container">
      <div id="box">Text</div>
    </div>
  </body>
</html>

JS 脚本标记位于它尝试访问的 DOM 元素之上，因此该
div元素在文件中不可访问index.js。

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

// ⛔️ Cannot read properties of null (reading 'querySelector')
const box = element.querySelector('#box');

相反，将 JS 脚本标记放在正文的底部，在它尝试访问的 DOM 元素之后。

索引.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div id="container">
      <div id="box">Text</div>
    </div>

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

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

索引.js
const element = document.getElementById('container');
console.log(element); // 👉️ div#container

// ✅ Works
const box = element.querySelector('#box');
console.log(box); // 👉️ div#box

HTML 代码是从上到下解析的，因此脚本标记必须位于它需要访问的 DOM 元素之后。

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

“无法读取 null 的属性（读取‘querySelectorAll’）”错误的发生有两个原因：

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

无法读取 null 的属性 queryselectorall

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

索引.js
const el = null;

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

这是另一个例子。

索引.js
const el = undefined;

// ⛔️ Uncaught TypeError: Cannot read properties of undefined (reading 'querySelectorAll')
el.querySelectorAll('div.box');

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

id该错误通常在向方法提供无效后发生getElementById
。

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

// ⛔️ Cannot read properties of null (reading 'querySelectorAll')
el.querySelectorAll('div.box');

id我们向该方法传递了一个不存在的值getElementById并取回了一个null
值。对值调用querySelectorAll()方法null会导致错误。

如果您收到错误“无法读取未定义的属性（读取‘querySelectorAll’）”，您可能使用了该getElementsByClassName方法。

索引.js
const elements = document.getElementsByClassName('does-not-exist');
console.log(elements); // 👉️ []

// ⛔️ Cannot read properties of undefined (reading 'querySelectorAll')
const boxes = elements[0].querySelectorAll('div.box');

我们将一个不存在的类名传递给该getElementsByClassName()方法并返回一个空的类数组对象。

越界访问索引处的数组将返回undefined。querySelectorAll()在值上调用
方法undefined会引发错误。

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

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

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

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

    <div id="container">
      <div class="box">Box 1</div>
      <div class="box">Box 2</div>
    </div>
  </body>
</html>

请注意，JS 脚本标记位于声明div
元素的代码上方。这意味着该index.js文件无法访问该div元素。

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

// ⛔️ Cannot read properties of null (reading 'querySelectorAll')
el.querySelectorAll('div.box');

相反，您应该将 JS 脚本标记移动到正文的底部，在它尝试访问的元素之后。

索引.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div id="container">
      <div class="box">Box 1</div>
      <div class="box">Box 2</div>
    </div>

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

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

索引.js
const el = document.getElementById('container');
console.log(el); // 👉️ div#container

// ✅ Works
const boxes = el.querySelectorAll('div.box');
console.log(boxes); // 👉️ [div.box, div.box]

HTML 代码是从上到下解析的，因此脚本标记必须位于它需要访问的 DOM 元素之后。