У меня есть элемент в 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.)
Значения атрибутов должны быть идентификаторами или строками CSS.
Идентификаторы не могут начинаться с числа. Строки должны быть указаны.
1 поэтому не является допустимым идентификатором и строкой.
Вместо этого используйте "1" (который является строкой).
var a = document.querySelector('a[data-a="1"]');
Вы можете использовать
var a = document.querySelector('a[data-a="1"]');
вместо
var a = document.querySelector('a[data-a=1]');
Да строки должны быть указаны, а в некоторых случаях, например, в applescript, кавычки должны быть экранированы
do JavaScript "document.querySelector('span[" & attrName & "=\"" & attrValue & "\"]').click();"