Почему JS-код "var a = document.querySelector(" a [data-a = 1] "); вызвать ошибку?

У меня есть элемент в DOM:

<a href="#" data-a="1">Link</a>

Я хочу получить этот элемент через свой собственный атрибут данных HTML5 data-a. Поэтому я пишу JS-коды:

var a = document.querySelector('a[data-a=1]');

Но этот код не работает, и я получаю сообщение об ошибке в консоли браузера. (Я тестировал Chrome и Firefox.)

JS-код var a = document.querySelector('a[data-a=a]'); не вызывает ошибки. Поэтому я думаю, что проблема заключается в том, что HTML5 JS API document.querySelector не поддерживает поиск значения в пользовательском атрибуте данных HTML5.

Является ли эта проблема ошибкой реализации браузера или проблемой спецификации HTML5, относящейся к document.querySelector?

Затем я проверил коды ниже на http://validator.w3.org/:

<!DOCTYPE html>
<meta charset="utf-8">
<title>An HTML Document</title>
<a href="#" data-a="1">Link</a>

Они подтверждены. Поскольку эти коды HTML5 проверяются. Мы можем использовать API-интерфейс HTML5 document.querySelector для поиска этого элемента привязки с помощью его атрибута пользовательских данных. Но факт в том, что я получаю ошибку.

Является ли спецификацией HTML5 для J5 API HTML5 document.querySelector сказать, что этот метод не может искать пользовательский атрибут данных HTML5 с номером? (Требуется источник спецификации HTML5.)

Ответ 1

Из спецификация селекторов:

Значения атрибутов должны быть идентификаторами или строками CSS.

Идентификаторы не могут начинаться с числа. Строки должны быть указаны.

1 поэтому не является допустимым идентификатором и строкой.

Вместо этого используйте "1" (который является строкой).

var a = document.querySelector('a[data-a="1"]');

Ответ 2

Вы можете использовать

var a = document.querySelector('a[data-a="1"]');

вместо

var a = document.querySelector('a[data-a=1]');

Ответ 3

Да строки должны быть указаны, а в некоторых случаях, например, в applescript, кавычки должны быть экранированы

do JavaScript "document.querySelector('span[" & attrName & "=\"" & attrValue & "\"]').click();"