123

据我了解，HTML5 规范允许您使用像这样的数字 ID。

<div id="1"></div>
<div id="2"></div>

我可以使用getElementById但不能使用querySelector. 如果我尝试执行以下操作，我会在控制台中得到SyntaxError: DOM Exception 12 。

document.querySelector("#1")

querySelector我只是好奇为什么当 HTML5 规范说这些数字有效时，使用数字作为 ID 不起作用。我尝试了多个浏览器。

4

6 回答 6

127

它是有效的，但需要一些特殊处理。从这里： http: //mathiasbynens.be/notes/css-escapes

前导数字

如果标识符的第一个字符是数字，则需要根据其 Unicode 代码点对其进行转义。例如，字符 1 的代码点是 U+0031，因此您可以将其转义为 \000031 或 \31。

基本上，要转义任何数字字符，只需在其前面加上 \3 并附加一个空格字符 ( )。耶 Unicode！

所以你的代码最终会是（首先是 CSS，其次是 JS）：

#\31  {
    background: hotpink;
}

document.getElementById('1');
document.querySelector('#\\31 ');
于 2013-11-30T22:11:11.423 回答
110

因为虽然它们在 HTML5 规范中有效，但在 CSS 中无效，这就是“查询选择器”的意思。

相反，你必须这样做： ，考虑到你可以给它一个有意义的ID 之类的东西document.querySelector("[id='1']")，这是非常冗长的；）message1

于 2013-11-30T22:08:45.667 回答
42

我需要一种自动化的方法。最近的一项更改意味着使用的 id 值不再是简单的字母字符，而是包括数字和特殊字符。

我最终使用CSS.escape：https ://developer.mozilla.org/en-US/docs/Web/API/CSS/escape

console.log(CSS.escape('1'));

首先，这是失败的案例：

const theId = "1";
document.querySelector(`#${theId}`);
const el = document.querySelector(`#${theId}`);
el.innerHTML = "After";
<div id="1">Before</div>

现在使用CSS.escape：

const theId = "1";
const el = document.querySelector(`#${CSS.escape(theId)}`);
el.innerHTML = "After";
<div id="1">Before</div>

查看它如何正确更改为 show After，证明选择器有效！

于 2018-11-22T03:56:22.733 回答
7

这是我刚刚为处理 CSS 选择器中的前导数字 ID 所做的一个函数，它是 IE 安全的，因为 CSS.escape 不是。

在使用它之前通过这个 cleanSelector 函数传递选择器：

var cleanSelector = function(selector){
    (selector.match(/(#[0-9][^\s:,]*)/g) || []).forEach(function(n){
        selector = selector.replace(n, '[id="' + n.replace("#", "") + '"]');
    });
    return selector;
};

var myselector = ".dog #980sada_as div span#aside:hover div.apple#05crab:nth-of-type(2), .ginger #2_green_div, div.cupcake #darwin p#23434-346365-53453";

var clean_myselector = cleanSelector(myselector);

// print to show difference
console.log(myselector);
console.log(clean_myselector);

//use the new selector like normal
var elems = document.querySelectorAll( clean_myselector );
于 2020-05-06T14:00:55.733 回答
3

来自 W3C 文档属性选择器语法

属性值必须是有效的 CSS 标识符或字符串。

因此，带有前导数字的数字或字母数字字符串不能作为有效标识符。

如果您使用 ID 生成器实用程序来生成标识符，您最终可能会得到带有前导数字的字母数字 ID。

一个快速的解决方法是从生成器的 SEED 中省略数字（如果可以修改）或始终将字符串附加到生成的 id。

于 2019-08-21T19:57:03.863 回答
2

在查询选择器中使用动态 ID 使用了简单的代码。

this.template.querySelector("[id='"+divId+"']");

如果您正在处理迭代并希望在 id 上访问，请查看此代码。我对帐户对象进行了迭代，并在 LWC 上使用了可点击事件：

<template for:each={accounts.data} for:item="acc">
     <div key={acc.Id} id={acc.Id} class="box" onclick={handleClick}>
       {acc.Name}
     </div>
</template>

onclick我想在 div 上调用事件时使用其 ID 访问 div 数据。

handleClick(event){
 event.dataTransfer.setData("divId", event.target.id);
 var divId = event.dataTransfer.getData("divId");

 //Using the divId in querySelector       
 var Element = this.template.querySelector("[id='"+divId+"']");

}
于 2021-09-01T07:32:37.230 回答