TypeError: querySelectorAll 不是 JS 中的函数

TypeError: querySelectorAll is not a function in JS

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

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

queryselectorall 不是函数

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

索引.js


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');

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

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

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

该querySelectorAll方法只能在 DOM 元素或document对象上调用。

要解决“querySelectorAll 不是函数”错误，请确保仅querySelectorAll在有效的 DOM 元素或document
对象上调用该方法，并在声明 DOM 元素后将 JS 脚本标记放在 body 标记的底部。

索引.html


<!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>

请注意，JS 脚本标记位于 DOM 元素之后。如果我们在声明 DOM 元素之前运行脚本，我们将无法访问它们。

这是该index.js文件的代码。

索引.js


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

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

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

尝试console.log调用方法的对象，看看它是否是有效的 DOM 元素。 querySelectorAll

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

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

索引.js


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)，你会得到一个"object"值，所以我们必须确保这个值不是null。

我们检查的最后一件事是对象包含属性。 querySelectorAll

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

结论

–