37

Tôi đã một yếu tố trong DOM:Tại sao mã JS "var a = document.querySelector ('a [data-a = 1]');" gây ra lỗi?

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

Tôi muốn để có được yếu tố này thông qua thuộc tính dữ liệu tùy chỉnh HTML5 của nó data-a. Vì vậy, tôi viết mã JS:

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

Tuy nhiên, mã này không làm việc và tôi nhận được một lỗi trong giao diện điều khiển của trình duyệt. (Tôi đã thử nghiệm Chrome và Firefox.)

Mã JS var a = document.querySelector('a[data-a=a]'); không gây ra lỗi. Vì vậy, tôi nghĩ vấn đề là JS API document.querySelector của HTML5 không hỗ trợ tìm kiếm giá trị số trong thuộc tính dữ liệu tùy chỉnh HTML5.

Đây có phải là vấn đề về lỗi triển khai trình duyệt hoặc vấn đề về thông số kỹ thuật của HTML5 có liên quan đến document.querySelector không?

Sau đó, tôi đã kiểm tra mã dưới đây vào http://validator.w3.org/:

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

Họ đang xác nhận. Vì các mã HTML5 này được xác thực. Chúng ta có thể sử dụng JS API document.querySelector của HTML5 để tìm phần tử neo này thông qua thuộc tính dữ liệu tùy chỉnh của nó. Nhưng tha thực tế là tôi nhận được lỗi.

Thông số của HTML5 đối với HTML5 JS API document.querySelector có nói rằng phương pháp này không thể tìm kiếm thuộc tính tùy chỉnh dữ liệu HTML5 có giá trị số không? (Một nguồn tin đặc tả HTML5 đang bị truy nã.)

+4

khi sử dụng [bộ chọn thuộc tính CSS] (http: //www.blo oberry.com/indexdot/css/syntax/selectors/attribute.htm), giá trị phải được bao bọc trong dấu ngoặc kép, ví dụ: 'a [dữ liệu-a =" 1 "]'. –

+2

'querySelectorAll()' không phải là "HTML5 JS API". Nó hoàn toàn không liên quan gì đến HTML5. – BoltClock

Trả lời

62

Từ the selectors specification:

giá trị thuộc tính phải là bộ nhận diện CSS hoặc chuỗi.

Số nhận dạng không thể bắt đầu bằng số. Các chuỗi phải được trích dẫn.

1 do đó không phải là số nhận dạng hợp lệ hay chuỗi.

Sử dụng "1" (là một chuỗi) thay thế.

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

và nếu số của bạn được lưu trữ trong một biến ví dụ var dataId = 5; sau đó nó sẽ được viết ra theo cách này tài liệu.querySelector ("a [data-a = '" + dataId + "']"); câu trả lời này đã giúp nhưng tôi đã gặp rắc rối với các dấu ngoặc kép cho một chút hy vọng điều này sẽ giúp một ai đó –

6

Bạn có thể sử dụng

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

thay vì

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

Có dây phải được trích dẫn và trong một số trường hợp như thế trong AppleScript, dấu ngoặc kép phải được thoát

do JavaScript "document.querySelector('span[" & attrName & "=\"" & attrValue & "\"]').click();" 
Các vấn đề liên quan