1

別のメソッドでこれらの要素を簡単に操作できるように、Javascript セレクターを作成しています。

私の関数はこのように呼び出されています:

//  Selecting three groups of elements in context 'document'
myFunc(["p", "div#id", "ul li"], document);

これまでの私の関数は、選択する要素を表す配列を設定します。

//  Representation corresponding to the selection above
matches[0] = [["p"]]
matches[1] = [["div", "#id"]]
matches[2] = [["ul"], ["li"]]

試してみましたが、これらの要素のいずれも取得できませんが、最も単純なものは取得できません: "p".

ヒントやヘルプはありますか？

4

1 に答える 1

3

DOM が CSS セレクターに一致する項目を検索する問題は解決済みです。その車輪を再発明して、すべての異なるブラウザーとパフォーマンスの最適化に対処する理由がわかりません。最新のブラウザーの場合document.querySelectorAll()は、正当な CSS セレクターを使用して渡すだけです。

古いブラウザー (IE7 など) との互換性のために、既製でテスト済みのセレクター ライブラリを利用できます。大量の DOM 操作を行う場合は、クロス ブラウザー セレクター エンジンが組み込まれており、他の多くの DOM 操作をサポートする jQuery のようなものが必要になる場合があります。jQuery では、セレクターは次のようになります。

// returns jQuery object that has array of DOM objects in it
var objects = $("p, div#id, ul li");

または、実績のあるセレクター ライブラリだけが必要な場合は、Sizzle (jQuery によって内部的に使用されるエンジン) を選択できます。Sizzle では、次のようになります。

// returns array of DOM elements
var objects = Sizzle("p, div#id, ul li");

独自のセレクター マッチング コードを本当に作成したい場合は、select を解析するコードを記述し、次に DOM 全体をウォークするコードを記述し、各タイプのセレクターを特定のオブジェクトに一致させるコードを作成する必要がありますドム。テスト済みでパフォーマンスが最適化された無料のライブラリが既に利用可能であるのに、コードをすべて再発明する理由がわかりません。文字通り数分で完了できます。

または、IE 7 のサポートが必要ない場合は、document.querySelectorAll(). IE 7 のサポートが必要な場合は、IE7 で利用できるポリフィルがいくつかありますdocument.querySelectorAll()が、その時点で、パフォーマンスが最適化されている、より優れたビルド済みセレクター ライブラリの 1 つを使用して、この問題を解決することもできます。

// returns a NodeList (an array-like list of nodes)
var objects = document.querySelectorAll("p, div#id, ul li");

独自のセレクター ライブラリを本当に構築したい場合は、どのセレクターをサポートする必要があるのか​​を正確に説明してください。

于 2013-03-23T07:21:18.263 に答える