37

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

<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]'); не вызывает ошибки. Поэтому я думаю, что проблема заключается в том, что JS API HTML5 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 проверяются. Мы должны использовать JS API HTML5 document.querySelector, чтобы найти этот элемент привязки через свой собственный атрибут данных. Но факт в том, что я получаю ошибку.

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

+4

когда с использованием [селекторов атрибутов CSS] (http: //www.blo oberry.com/indexdot/css/syntax/selectors/attribute.htm), значение должно быть заключено в кавычки, например. 'А [данных а = "1"]'. –

+2

'querySelectorAll()' не является «API-интерфейсом HTML5». Это абсолютно не имеет никакого отношения к HTML5. – BoltClock

ответ

62

От the selectors specification:

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

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

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

Используйте вместо этого "1" (это строка).

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

и если ваш номер хранится в переменной например var dataId = 5; тогда это должно быть выписано таким образом документ.querySelector ("а [данных а = '" + dataId +']"); этот ответ помог, но у меня были проблемы с кавычками, чтобы немного надеяться, что это поможет кому-то –

6

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

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

вместо

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

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

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

 Смежные вопросы

  • Нет связанных вопросов^_^