JavaScript 中 Failed to execute 'querySelector' on Document 错误
当我们使用带有以数字开头的标识符的 querySelector 方法时，会发生“Failed to execute 'querySelector' on Document”错误。 要解决该错误，请确保我们传递给 querySelector 方法的类名或 ID 不以数字开头。
下面是错误如何发生的示例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<!-- ⛔️ id or class name starting with digit ⛔️ -->
<div id="1box">Box 1</div>
<div id="2box">Box 2</div>
<script src="index.js"></script>
</body>
</html>
如果我们尝试使用 querySelector 方法来获取元素，我们会得到错误。
// ⛔️ Failed to execute 'querySelector' on 'Document'
const first = document.querySelector('#1box');
标识符不能以一个数字、两个连字符或一个连字符后跟一个数字开头。
要解决“Failed to execute 'querySelector' on Document”错误，请将整个属性传递给 querySelector 方法或更新 DOM 元素的标识符，使其不以数字开头。
下面介绍了如何将整个属性传递给 querySelector 方法以避免更改 DOM 元素的 ID。
// ✅ Works
const first = document.querySelector("[id='1box']");
console.log(first); // 👉️ div#1box
但是，由于我们可能会忘记这个怪癖，最好将元素的标识符更改为不以数字开头。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<!-- ✅ ID doesn't start with digit ✅ -->
<div id="box1">Box 1</div>
<div id="box2">Box 2</div>
<script type="module" src="index.js"></script>
</body>
</html>
现在我们可以使用 querySelector 并且一切都按预期工作。
const first = document.querySelector('#box1');
console.log(first); // 👉️ div#box1
或者，我们可以使用 getElementById 方法，我们可以将以数字开头的 ID 传递给该方法。
const first = document.getElementById('1box');
console.log(first); // 👉️ div#1box
请注意，我们在使用getElementById方法时不包含#符号。
相关文章
使用 CSS 和 JavaScript 制作文本闪烁
发布时间：2023/04/28 浏览次数：146 分类：CSS
-
本文提供了使用 CSS、JavaScript 和 jQuery 使文本闪烁的详细说明。
在 PHP 变量中存储 Div Id 并将其传递给 JavaScript
发布时间：2023/03/29 浏览次数：69 分类：PHP
-
本文教导将 div id 存储在 PHP 变量中并将其传递给 JavaScript 代码。
在 JavaScript 中从字符串中获取第一个字符
发布时间：2023/03/24 浏览次数：93 分类：JavaScript
-
在本文中，我们将看到如何使用 JavaScript 中的内置方法获取字符串的第一个字符。
在 JavaScript 中获取字符串的最后一个字符
发布时间：2023/03/24 浏览次数：141 分类：JavaScript
-
本教程展示了在 javascript 中获取字符串最后一个字符的方法
