93

私は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]');はエラーを引き起こしません。document.querySelector問題は、HTML5 の JS APIが 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 コードは検証されているためです。HTML5 の JS APIdocument.querySelectorを使用して、カスタム データ属性を介してこのアンカー要素を探すことができます。しかし、実際にはエラーが発生します。

HTML5 JS API に対する HTML5 の仕様document.querySelectorは、このメソッドが数値を持つ HTML5 データ カスタム属性を検索できないと言っていますか? (HTML5 仕様のソースが必要です。)

4

6 に答える 6

175

セレクター仕様から：

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

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

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

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

var a = document.querySelector('a[data-a="1"]');
于 2013-02-11T09:52:32.387 に答える
7

あなたが使用することができます

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

それ以外の

var a = document.querySelector('a[data-a=1]');
于 2013-02-11T09:56:07.780 に答える
-4

変数を使用した例 (ES6):

const item = document.querySelector( [data-itemid="${id}"]);

于 2020-02-24T16:59:52.320 に答える