問題タブ [selectors-api]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - なぜ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]');
はエラーを引き起こしません。document.querySelector
問題は、HTML5 の JS APIが HTML5 カスタム データ属性の数値の検索をサポートしていないことだと思います。
これはブラウザの実装バグの問題なのか、HTML5の仕様の問題なのdocument.querySelector
か。
次に、 http://validator.w3.org/で以下のコードをテストしました。
それらは検証済みです。これらの HTML5 コードは検証されているためです。HTML5 の JS APIdocument.querySelector
を使用して、カスタム データ属性を介してこのアンカー要素を探すことができます。しかし、実際にはエラーが発生します。
HTML5 JS API に対する HTML5 の仕様document.querySelector
は、このメソッドが数値を持つ HTML5 データ カスタム属性を検索できないと言っていますか? (HTML5 仕様のソースが必要です。)
javascript - querySelectorAll を使用して要素を取得する
私はhtmlタグを持っています、
を使用してこの要素を取得する必要があります
しかし、上記のコードは常に空の配列を返します。querySelectorAll() を使用して要素を取得するのを手伝ってください。
javascript - 結果のリストに CSS セレクターの粒度が必要ないのに、「ライブ」NodeList よりも静的な NodeList/HTMLCollection が必要になるのはなぜですか?
ライブの NodeList は「悪い」ため(この Zakas の記事を参照)querySelectorAll
、それが static を返すという決定を通知したためHTMLCollection
です。ライブ NodeList が悪いことだと人々が考えるのはなぜですか? コード例は、おそらくこれを最もよく理解するのに役立ちます。
ノードのキャッシュされたコレクションの値を計算に使用したいときはいつでも、そのコレクションがたまたま古いスナップショットではない場合、それを「悪い」こととは本当に見なすことができません。
CSS セレクター文字列を使用して要素を選択することがどれほど便利かは正確に理解していますが、コレクションを取得した直後にそのコレクションに対してコードを確実に実行することしかできない場合は、 live よりもかなり役に立たないようですNodeList
。
javascript - querySelectorAllを使用して選択したオプションを取得する
<select multiple>
Javascriptで、すべてのオプションに対する「ばかげた」反復ではなく、Selctors APIを使用して、フィールドで現在選択されているオプションを取得できるかどうか疑問に思います。
select.querySelectorAll('option[selected="selected"]')
元のHTMLで事前選択としてマークされたオプションのみを返しますが、これは私が探しているものではありません。何か案は?
javascript - document.querySelector は、quirks モードの親で実行されている標準モードの iframe では定義されていません
ブックマークレットを使用して IE 10 を実行しているときにこれを経験しています。quirks モードで実行中のページに対してブックマークレットを実行し、document.querySelector を使用しようとすると、document.querySelector が定義されていません。
これを回避するために、document.documentMode が 5 (quirks モード) であることを検出すると、iframe を作成し、ページのコンテンツをその iframe にコピーして標準モードにします。iframe 内のドキュメントが標準モード (document.documentMode は 8 - IE 8 標準モード) であることを確認しましたが、document.querySelector はまだ定義されていません。querySelector をサポートするには、documentMode が少なくとも 9 である必要があると思います。IE 10 で実行しているため、documentMode が 10 ではなく 8 である理由がわかりません。
javascript - document.querySelectorAll('a:visited') が機能しない
document.querySelectorAll('a:visited')
DOM に訪問済みのリンクがある場合でも、常に空の NodeList を返します。
Chromeで試してみました。既知のバグはありますか、それとも予想される動作ですか?
querySelectorAll:visited
の代わりにスタイル シートで使用すると、完全に正常に動作します。
のパラメータとして擬似クラスが許可されていると思いますquerySelectorAll()
。
javascript - querySelectorAll 引数の正規表現バリデーター
querySelectorAll() メソッドの引数を検証するための非常に基本的な正規表現を作成しました。いくつかのランダムな値について検証され、正常に機能しているようです。
改善できるかどうかを知りたかっただけです。
正規表現によっていくつかの検証が見逃される可能性がありますが、私の主な質問は、私のアプローチ、この正規表現の書き方についてです。また、私は正規表現にかなり慣れていません。パフォーマンスに関して重大な間違いをしている場合は、指摘してください。
javascript - 「ライブ」要素の説明
NodeLists に関するこの記事を読みました。
http://www.nczonline.net/blog/2010/09/28/why-is-getelementsbytagname-faster-that-queryselectorall/
私が正しく理解している場合、getElementsByTag 名は有効で、querySelectorAll は有効ではありません。では、pNotLive のタイトルが「stackoverflow」である理由を説明してもらえますか? :
javascript - IE <= 7 の Element に querySelectorAll() 関数を追加する方法は?
この記事のコードを使用しquerySelectorAll
てdocument
、IE7に正常に追加できました。
しかし、次のように、ではなく要素で使用する必要があります。document
querySelectorAll
だけではなく、IE7 の要素に追加する方法はありdocument
ますか?