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');
我们成功地调用了第 1 行的 querySelectorAll 方法。
querySelectorAll 方法返回一个 NodeList，它是一个类数组对象。
然后我们尝试调用 NodeList 上的 querySelectorAll 方法并返回错误。
querySelectorAll方法只能在 DOM 元素或文档对象上调用。
要解决“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>
请注意，JS 脚本标记位于 DOM 元素之后。 如果我们在声明 DOM 元素之前运行脚本，我们将无法访问它们。
这是 index.js 文件的代码。
const blue = document.querySelectorAll('.box .blue');
console.log(blue); // 👉️ [div.blue]
我们在文档对象上调用了 querySelectorAll。 我们可以在文档对象或有效的 DOM 元素上调用该方法。
如果错误仍然存在，请确保没有拼错 querySelectorAll，因为它区分大小写。
尝试使用
console.log打印调用querySelectorAll方法的对象，看看它是否是有效的 DOM 元素。
如果我们调用该方法的元素有时不存在，可以在调用 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属性。
然后我们知道我们可以安全地对该对象调用 querySelectorAll 方法。
相关文章
Do you understand JavaScript closures?
发布时间：2025/02/21 浏览次数：108 分类：JavaScript
-
The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.
Do you know about the hidden traps in variables in JavaScript?
发布时间：2025/02/21 浏览次数：178 分类：JavaScript
-
Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av
How much do you know about the Prototype Chain?
发布时间：2025/02/21 浏览次数：150 分类：JavaScript
-
The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start
如何在 JavaScript 中合并两个数组而不出现重复的情况
发布时间：2024/03/23 浏览次数：86 分类：JavaScript
-
本教程介绍了如何在 JavaScript 中合并两个数组，以及如何删除任何重复的数组。
