web-dev-qa-db-ja.com

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カスタムデータ属性の数値を検索することをサポートしていないことだと思います。

これはブラウザ実装のバグの問題ですか、それともHTML_5の仕様の問題は_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コードは検証されているため。 HTML5のJS API _document.querySelector_を使用して、カスタムデータ属性を介してこのアンカー要素を検索する必要があります。しかし、実際にはエラーが発生します。

HTML5のHTML5 JS APIの仕様_document.querySelector_は、このメソッドが数値を持つHTML5データのカスタム属性を検索できないと言っていますか？ （HTML5仕様のソースが必要です。）

javascripthtml5css-selectorscustom-data-attributeselectors-api
57
weilou

セレクター仕様 から：

属性値はCSS識別子または文字列でなければなりません。

識別子を数字で始めることはできません。文字列は引用符で囲む必要があります。

したがって、1は有効な識別子でも文字列でもありません。

代わりに"1"（文字列）を使用してください。

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

使用できます

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

の代わりに

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

これを見つけるのにしばらく時間がかかりましたが、変数に格納されている数値、たとえばxを選択したい場合は、

document.querySelector('a[data-a= + CSS.escape(x) + ']').

これは、まだあまり馴染みのないいくつかの属性命名仕様によるものです。これが誰かを助けることを願っています。

0
Donat