时间戳

首页 > 解决方案 > document.querySelector 不适用于 id 中的“=”符号

javascript - document.querySelector 不适用于 id 中的“=”符号

问题描述

document.querySelector()在元素中使用特定类型的 id 时，我遇到了函数错误。当 idcanvas-=为时，querySelector 失败并出现错误 -> 无法在“文档”上执行“querySelector”：“#canvas-=”不是有效的选择器。

但是当我使用时document.getElementById()，它可以工作。我可以"[id='canvas-=']"在 querySelector 中使用，但为什么会失败document.querySelector("#canvas-=")？

  1. document.querySelector("#canvas-=")

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is a Heading</h1>
<p id="canvas-=">This is a paragraph.</p>

<script>
const elem = document.querySelector("#canvas-=");
console.log(elem.innerHTML);
</script>

</body>
</html>

  1. document.getElementById("canvas-=")

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is a Heading</h1>
<p id="canvas-=">This is a paragraph.</p>

<script>
const elem = document.getElementById("canvas-=");
console.log(elem.innerHTML);
</script>

</body>
</html>

=但是，如果我从 id中删除，一切正常。插入它以任何方式都不起作用。==-, =-,-=所有这些都给出了错误。那么这个符号有什么问题，=为什么第二种方法有效但第一种方法无效？

标签： javascripthtmlcss

解决方案

querySelector方法使用 CSS3 选择器来查询 DOM。

这意味着

在 CSS 中，标识符（包括选择器中的元素名称、类和 ID）只能包含字符 [a-zA-Z0-9] 和 ISO 10646 字符 U+00A0 及更高，加上连字符 (-) 和下划线 ( _); 它们不能以数字、两个连字符或一个连字符后跟一个数字开头。

显然你有=。所以没有=它可以正常工作。

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is a Heading</h1>
<p id="canvas-">This is a paragraph.</p>

<script>
const elem = document.querySelector("#canvas-");
console.log(elem.innerHTML);
</script>

</body>
</html>

更多关于它。https://www.w3.org/TR/CSS21/syndata.html#characters 结帐主题 4.1.3

推荐阅读