在 DOM 中，节点 ID 区分大小写吗？答案

【问题标题】：In the DOM are node ids case sensititve?在 DOM 中，节点 ID 区分大小写吗？
【发布时间】：2010-11-17 05:39:33
【问题描述】：

这个 HTML 有效吗？还是 id 'a' 和 id 'A' 一样？

<div id="a">alpha</div>
<div id="A">Alpha</div>

【问题讨论】：

标签： html dom

【解决方案1】：

是的。它区分大小写。属性值始终区分大小写。不过，不同的浏览器似乎在做不同的事情。

不同浏览器对document.getElementById 的处理方式不同：

Mozilla 执行区分大小写的搜索。
Internet Explorer：IE 8 及更高版本执行区分大小写的搜索，而 IE 7 及更早版本执行不区分大小写的搜索。

【讨论】：

2019 年更新：所有现代浏览器中的 ID 都区分大小写（“ABC”！=“abc”）；测试：Mozilla Firefox 64、Google Chrome 71、Internet Explorer 11、Microsoft Edge (Chakra) 41 和 Opera 57。

【解决方案2】：

这里需要澄清一点，因为上述所有答案都只是部分正确。在 DOM 和 Java Script 的上下文中，是的，ID 区分大小写。在 CSS 中它们不是，因为 CSS 完全不区分大小写。

http://www.w3.org/TR/css3-selectors/#casesens

所有选择器语法在 ASCII 范围内不区分大小写（即 [a-z] 和 [A-Z] 是等效的），但不受选择器控制的部分除外。选择器中的文档语言元素名称、属性名称和属性值是否区分大小写取决于文档语言。例如，在 HTML 中，元素名称不区分大小写，但在 XML 中，它们区分大小写。命名空间前缀的大小写敏感性在 [CSS3NAMESPACE] 中定义。

因此，在不同情况下拥有两个 id 是个坏主意，因为您将无法通过 id 独立设置它们的样式。

【讨论】：

请注意 CSS 本身，例如wiDth: 100% 不区分大小写，但 CSS 中使用的 HTML 选择器实际上是区分大小写的。所以这是不正确的。请参阅stackoverflow.com/questions/12533926/… 仍然使用混合大小写 ID 可能不是一个好主意
@xji 一种可能的用例是随机生成的 Id 以避免冲突。能够使用大写和小写字母可以减少长度。

【解决方案3】：

好吧，你可以很容易地测试这个...But yes, they are case-sensitive.

【讨论】：

【解决方案4】：

它在所有现代浏览器（IE 8+）上都有效，但我不推荐它，因为CSS 不区分大小写。最好坚持一种情况，以避免与CSS 发生任何可能的混淆或错误。

【讨论】：

【解决方案5】：

考虑以下元素：

<div id="Example"></div>

在现代浏览器中，大多数用于通过id 获取Element 对象的JavaScript 方法都区分大小写：

document.getElementById('Example')         // <div id="Example">
document.getElementById('example')         // null
document.querySelector('#Example')         // <div id="Example">
document.querySelector('#example')         // null
document.querySelector('[id="Example"]')   // <div id="Example">
document.querySelector('[id="example"]')   // null

另一方面，您可以使用case-insensitive attribute selector 通过id 选择元素，而不管大小写：

document.querySelector('[id="Example" i]') // <div id="Example">
document.querySelector('[id="example" i]') // <div id="Example">

上述方法适用于 ASCII 范围内的所有 HTML 属性值。

虽然不推荐，但你也可以使用case-insensitive search正则表达式标志来获取id的元素，与大小写无关。这种方法不仅可以用于不区分大小写的模式匹配：

[...document.querySelectorAll('[id]')].find(e => /^Example$/i.test(e.id)) // <div id="Example">
[...document.querySelectorAll('[id]')].find(e => /^example$/i.test(e.id)) // <div id="Example">

关于 CSS，ID selector (#example) 不区分大小写，而 ID attribute selector ([id="example"]) 区分大小写，除非您使用 case-insensitive attribute selector ([id="example" i]) ：

#Example         { /* ... */ } /* Match */
#example         { /* ... */ } /* Match */
[id="Example"]   { /* ... */ } /* Match */
[id="example"]   { /* ... */ } /* No Match */
[id="Example" i] { /* ... */ } /* Match */
[id="example" i] { /* ... */ } /* Match */

【讨论】：