JavscriptのSelector API
3109 ワード
JQueryでCSSセレクタを使用する要素の取得は非常に便利であるが、JavascriptはCSSセレクタを介して要素を取得するためのオリジナルAPIも提供する:querySelector()、querySelectorAll()である.(完全にサポートされているブラウザは、IE 8+、Firefox 3.5+、Safari 3.1+、Chrome、Opera 10+)
以下に、W 3 CによるSelector APIの2つのメソッドの定義を示す(http://www.w3.org/TR/selectors-api).
W 3 C Selectors API Level 1は
The
querySelector() methods on the Document, DocumentFragment, and Element interfaces must return the first matching Element node within the subtrees of the context node. If there is no matching Element, the method must return null.
W 3 C Selectors API Level 1は
The
querySelectorAll() methods on the Document, DocumentFragment, and Element interfaces must return a NodeList containing all of the matching Element nodes within the subtrees of the context node, in document order. If there are no matching nodes, the method must return an empty NodeList.
例:次のHTMLクリップがあります.
Selector APIを使用して要素を取得するには、次の手順に従います.
最後の例については,我々が普段JQueryのセレクタを用いて得た結果とは異なり,この問題についてW 3 Cは以下のように説明する(http://www.w3.org/TR/selectors-api/#examples0).
W 3 C Selectors API Level 1は
Even though the method is invoked on an element, selectors are still evaluated in the context of the entire document.
したがって、selector APIがエレメント上で呼び出されても、Documentの範囲内で一致するエレメントが検索されますが、検索が完了すると、各結果が呼び出しエレメントの範囲内(つまり呼び出しエレメントの子孫エレメントかどうか)にあるかどうかを判断し、存在しない場合はフィルタリングされます.
以下に、W 3 CによるSelector APIの2つのメソッドの定義を示す(http://www.w3.org/TR/selectors-api).
W 3 C Selectors API Level 1は
The
querySelector() methods on the Document, DocumentFragment, and Element interfaces must return the first matching Element node within the subtrees of the context node. If there is no matching Element, the method must return null.
W 3 C Selectors API Level 1は
The
querySelectorAll() methods on the Document, DocumentFragment, and Element interfaces must return a NodeList containing all of the matching Element nodes within the subtrees of the context node, in document order. If there are no matching nodes, the method must return an empty NodeList.
例:次のHTMLクリップがあります.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Selectors API Example</title>
</head>
<body>
<div id="foo">
<p class="warning">This is a sample warning</p>
<p class="error">This is a sample error</p>
</div>
<div id="bar">
<p>...</p>
</div>
</body>
</html>Selector APIを使用して要素を取得するには、次の手順に従います.
/*
querySelector() , querySelectorAll()
NodeList（ ， ）。
Document, DocumentFragment, Element ，
。
*/
// id "foo" "bar" （<div id="foo"/>）
var barOrFoo = document.querySelector("#foo, #bar");
// <div id='foo'/> <p/>
var p = barOrFoo.querySelector("p");
// <p/>
var pList = document.querySelectorAll("p");
// ， ，
// <div id="foo"/> div warning <p/> ，
//<div id="foo"/> <div/>， null，
// <p class="warning"/>
var warning = barOrFoo.querySelector("div p.warning");
alert(warning == null); //false最後の例については,我々が普段JQueryのセレクタを用いて得た結果とは異なり,この問題についてW 3 Cは以下のように説明する(http://www.w3.org/TR/selectors-api/#examples0).
W 3 C Selectors API Level 1は
Even though the method is invoked on an element, selectors are still evaluated in the context of the entire document.
したがって、selector APIがエレメント上で呼び出されても、Documentの範囲内で一致するエレメントが検索されますが、検索が完了すると、各結果が呼び出しエレメントの範囲内(つまり呼び出しエレメントの子孫エレメントかどうか)にあるかどうかを判断し、存在しない場合はフィルタリングされます.