Javascript 中 TypeError: querySelectorAll is not a function 错误

出现“querySelectorAll is not a function”错误的原因有多种:

  • 在不是有效 DOM 元素或文档对象的对象上调用方法。
  • 将 JS 脚本标记放在声明 DOM 元素的代码上方。
  • 拼写错误的 querySelectorAll 方法(区分大小写)。

下面是产生上述错误的一个代码示例

const boxes = document.querySelectorAll('.box');
console.log(boxes); // ?️ [div.box, div.box, div.box]

// ⛔️ TypeError: boxes.querySelectorAll is not a function
const blue = boxes.querySelectorAll('.blue');

Javascript 中 TypeError: querySelectorAll is not a function 错误

我们成功地调用了第 1 行的 querySelectorAll 方法。

querySelectorAll 方法返回一个 NodeList,它是一个类数组对象。

然后我们尝试调用 NodeList 上的 querySelectorAll 方法并返回错误。

要解决“querySelectorAll is not a function”错误,请确保仅在有效的 DOM 元素或文档对象上调用 querySelectorAll 方法,并将 JS 脚本标记放在 body 标记的底部,在声明 DOM 元素后 。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div class="box">Box 1</div>
    <div class="box">
      <div class="blue">Box 2</div>
    </div>
    <div class="box">Box 3</div>

    <!-- ✅ Your JS script here ✅ -->
    <script src="index.js"></script>
  </body>
</html>

这是 index.js 文件的代码。

const blue = document.querySelectorAll('.box .blue');
console.log(blue); // ?️ [div.blue]

我们在文档对象上调用了 querySelectorAll。 我们可以在文档对象或有效的 DOM 元素上调用该方法。

如果错误仍然存在,请确保没有拼错 querySelectorAll,因为它区分大小写。

如果我们调用该方法的元素有时不存在,可以在调用 querySelectorAll 方法之前有条件地检查该元素是否存在。

例如,一个基本的 DOM 元素有一个对象类型,所以我们可以在调用方法之前检查该值是否是一个对象并且包含 querySelectorAll 属性。

const box = null;

if (typeof box === 'object' && box !== null && 'querySelectorAll' in box) {
  console.log(box.querySelectorAll('.blue'));
}

我们的 if 条件使用逻辑与 && 运算符,因此要运行 if 块,必须满足所有条件。

我们首先检查 box 变量是否存储了一个对象类型的值,因为 DOM 元素有一个对象类型。

然后我们检查变量是否不等于 null。 不幸的是,如果使用 console.log(typeof null),我们将得到一个“Ojbect”值,因此我们必须确保该值不为空。

然后我们知道我们可以安全地对该对象调用 querySelectorAll 方法。