BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] var a = document.querySelector('a[data-a=1]');" というJSコードはなぜエラーになるのでしょうか？

2023-02-17 08:07:45

質問

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

これはブラウザの実装の問題なのか、それとも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 APIを使うことができるはずです。 document.querySelector を使って、このアンカー要素をカスタムデータ属性で探せるはずです。しかし、実際にはエラーが発生します。

HTML5 の JS API への仕様では document.querySelector は、このメソッドが数値値を持つ HTML5 データ カスタム属性を探すことができないと述べていますか？(HTML5仕様のソースが欲しいところです）。

どのように解決するのですか？

から セレクタの指定 :

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

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

1 は有効な識別子でも文字列でもありません。

使用する "1" (これは文字列です)を代わりに使用します。 

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

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します