Question

以下代码返回控制台错误：

“未捕获的SyntaxError：无法在'Document'上执行'querySelector'：'＃57acafcbdb4bc607922b834f'不是有效的选择器。”

HTML5不应该接受以数字开头的ID吗？对于需要此类ID的情况，是否有解决方法？

<!DOCTYPE html>
<html>
<body>

<h2 id="57acafcbdb4bc607922b834f">A heading with class="example"</h2>
<p>A paragraph with class="example".</p>

<p>Click the button to add a background color to the first element in the document with class="example".</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
    document.querySelector("#57acafcbdb4bc607922b834f").style.backgroundColor = "red";
}
</script>

</body>
</html>

Answer 1

以数字开头的ID在HTML 5中确实有效，但#57acafcbdb4bc607922b834f不是有效的CSS选择器，document.querySelector()使用CSS选择器。

您可以使用属性选择器：

document.querySelector('[id="57acafcbdb4bc607922b834f"]')

或者您可以使用document.getElementById()：

document.getElementById('57acafcbdb4bc607922b834f')

请参阅以下代码段：

＆＃13;

console.log(document.querySelector('[id="57acafcbdb4bc607922b834f"]'))
console.log(document.getElementById('57acafcbdb4bc607922b834f'))

＆＃13;

<div id="57acafcbdb4bc607922b834f"></div>

＆＃13;

Answer 2

// Escape the first digit with its unicode value in hex
document.querySelector('#\\35 1').style.color = 'green' 

// Or use getElementById 
document.getElementById('52').style.color = 'red'

<div id="51"> Element 51, should be green </div> 
<div id="52"> Element 52, should be red

来源：https://mothereff.in/css-escapes

如何修复不被接受为查询选择器的ID？

2 个答案: