37

Mam elementu w DOM:Dlaczego kod JS "var a = document.querySelector (" a [data-a = 1] ");" powodować błąd?

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

chcę dostać ten element poprzez jego dane atrybutów niestandardowych HTML5 data-a. Więc piszę kodów JS:

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

ale ten kod nie działa i pojawia się błąd w konsoli przeglądarki. (Testowałem Chrome i Firefox.)

Kod JS var a = document.querySelector('a[data-a=a]'); nie powoduje błędu. Myślę więc, że problem polega na tym, że JS API HTML5 document.querySelector nie obsługuje wyszukiwania wartości liczbowej w niestandardowym atrybucie danych HTML5.

Czy jest to problem związany z błędem implementacji przeglądarki lub z problemem specyfikacji HTML5 związanej z document.querySelector?

Potem testowane na http://validator.w3.org/ kody poniżej:

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

Są one zatwierdzone. Ponieważ te kody HTML5 są sprawdzane. Powinniśmy użyć interfejsu API JS HTML5 document.querySelector, aby wyszukać ten element zakotwiczenia za pomocą jego niestandardowego atrybutu danych. Ale faktem jest, że dostaję błąd.

Czy specyfikacja HTML5 do JS API HTML5 document.querySelector mówi, że ta metoda nie może wyszukać niestandardowego atrybutu danych HTML5 z wartością liczbową? (An źródło specyfikacji HTML5 jest poszukiwany.)

+4

kiedy za pomocą [selektorów atrybutów CSS] (http: //www.blo oberry.com/indexdot/css/syntax/selectors/attribute.htm), wartość powinna być zawijana w cudzysłów, np. 'a [dane-a =" 1 "]'. –

+2

'querySelectorAll()' nie jest "interfejsem API JS HTML5". Nie ma to absolutnie nic wspólnego z HTML5. – BoltClock

Odpowiedz

62

Od the selectors specification:

wartości atrybutów muszą być identyfikatorami CSS lub struny.

Identyfikatory nie mogą zaczynać się od cyfry. Ciągi muszą być cytowane.

1 nie jest zatem ani ważnym identyfikatorem, ani łańcuchem.

Zamiast tego użyj "1" (która jest ciągiem znaków).

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

i jeśli twój numer jest przechowywany w zmiennej np. Var dataId = 5; następnie należy zapisać w ten sposób dokument .querySelector ("a [data-a = '" + dataId + "']"); ta odpowiedź pomogła, ale miałem kłopot z cytatami dla odrobiny nadziei, że to pomaga komuś –

6

można użyć

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

zamiast

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

Tak struny musi być cytowany, aw niektórych przypadkach, takich jak w AppleScript, cytaty muszą być uciekł

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