В DOM чувствительны регистры идентификаторов узлов?

Question

Допустим ли этот HTML? Или идентификатор «а» совпадает с идентификатором «А»?

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

Answer 1

Да. Это с учетом регистра. Значения атрибутов всегда чувствительны к регистру. Хотя разные браузеры, похоже, делают разные вещи.

Обработка document.getElementById отличается в разных браузерах:

1. Mozilla выполняет поиск с учетом регистра.

2. Internet Explorer : IE 8 и более поздние версии выполняют поиск с учетом регистра, а IE 7 и более ранние версии выполняют поиск без учета регистра.

Answer 2

Немного разъяснений, поскольку все приведенные выше ответы верны только частично. В контексте DOM и Java Script да, идентификаторы чувствительны к регистру. В CSS их нет, так как CSS полностью нечувствителен к регистру.

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

Синтаксис всех селекторов нечувствителен к регистру в диапазоне ASCII (т. Е. [A-z] и [A-Z] эквивалентны), за исключением частей, которые не контролируются селекторами. Чувствительность к регистру имен элементов языка документа, имен атрибутов и значений атрибутов в селекторах зависит от языка документа. Например, в HTML имена элементов нечувствительны к регистру, но в XML они чувствительны к регистру. Чувствительность к регистру префиксов пространства имен определяется в [CSS3NAMESPACE].

Из-за этого плохая идея иметь два идентификатора в разных случаях, так как вы не сможете стилизовать их независимо по идентификатору.

Answer 3

Ну, вы можете проверить это довольно легко ... Но да, они чувствительны к регистру.

Answer 4

Он действителен во всех современных браузерах (IE 8+), но я не рекомендую его, поскольку CSS не учитывает регистр. Лучше придерживаться одного случая, чтобы избежать возможной путаницы или ошибок с CSS.

Answer 5

Рассмотрим следующий элемент:

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

В современных браузерах большинство методов JavaScript, используемых для получения объекта Element с помощью id, чувствительны к регистру:

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

С другой стороны, вы можете использовать нечувствительный к регистру селектор атрибута , чтобы выбрать элемент с помощью id независимо от заглавных букв:

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

Приведенный выше метод будет работать для всех значений атрибутов HTML в диапазоне ASCII.

Хотя это и не рекомендуется, вы также можете использовать регистрозависимый поиск флаг регулярного выражения, чтобы получить элемент на 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, селектор идентификатора (#example) нечувствителен к регистру, тогда как селектор атрибута ID ([id="example"]) чувствителен к регистру, если только вы используйте селектор атрибутов без учета регистра ([id="example" i]):

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