cssquery（）：CSSセレクターを使用してDOMをクエリします-jsチュートリアル-php.cn

cssquery（）：CSSセレクターを使用してDOMをクエリします

Lisa Kudrow

リリース： 2025-03-07 00:29:10

オリジナル

958 人が閲覧しました

cssQuery(): query the DOM with CSS selectors

（Planet Web 2.0から）CSSquery（）は、Dean Edwards（IE7スクリプトの有名な開発者）によって開発された新しいJavaScriptライブラリであり、CSSセレクターSynTaxを使用してドキュメント要素への参照を取得できます。 DOMは、HTMLおよびXMLドキュメントを読み取り、書き、変更するための強力で効率的なAPIです。 JavaScriptと組み合わせて使用する場合、DHTML効果の基礎です。ただし、多くのコードが必要になる場合があります。 SitePointで使用するテーブルソートスクリプトから来るこの小さなスニペットを考えてみましょう：

function sortables_init() {
    // 查找所有具有 sortable 类的表格并使其可排序
    if (!document.getElementsByTagName) return;
    tbls = document.getElementsByTagName("table");
    for (ti=0; ti < tbls.length; ti++) {
        thistbl = tbls[ti];
        ts_makesortable(thistbl);
    }
}

ログイン後にコピー

このコードは良いですが、実際には、ソート可能なクラスを適用するすべてのテーブル要素にts_makesortable関数を呼び出すだけです。 cssquery（）：

を使用したコードは次のとおりです

function sortables_init() {
    // 查找所有具有 sortable 类的表格并使其可排序
    tbls = cssQuery("table.sortable");
    for (ti=0; ti < tbls.length; ti++) {
        ts_makesortable(tbls[ti]);
    }
}

ログイン後にコピー

典型的なDHTMLスクリプトでは、結果のコードの節約が驚くべきものです。もちろん、CSSセレクターを純粋なJavaScriptで解析して解釈する必要があるため、パフォーマンスを犠牲にしますが、これまでのところ、ブラウザを圧倒したJavaScriptアプリケーションはほとんどありません。

cssquery（）は、すべてのCSS1およびCSS2セレクター、および多くのCSS3セレクターをサポートします。これは、現在のほとんどのWebブラウザーよりもさらに優れており、完全に純粋なJavaScriptで書かれています！

アップデート：

Simon Willisonは、2003年3月に同様のライブラリを作成しました。多くのCSSセレクタータイプをサポートしていませんが、毎日の使用に必要な機能のほとんどが含まれている場合があります。したがって、それは軽いかもしれません。

CSSクエリに関する

FAQ

CSSクエリとは何ですか？それはどのように機能しますか？

CSSセレクターとしても知られる

CSSクエリは、ID、クラス、タイプ、属性などに基づいてHTML要素を選択および操作するためのWeb開発の強力なツールです。指定されたセレクターに一致する要素に特定のスタイルを適用することで機能します。これにより、開発者は動的でインタラクティブなWebページを簡単に作成できます。 CSSクエリは、JavaScriptでDOM操作のために広く使用されており、Seleniumなどのテストツールの要素を見つけるために使用されています。

CSSクエリを使用して属性に基づいて要素を選択する方法は？

CSSクエリを使用すると、正方形の括弧[]を使用して要素の属性に基づいて選択できます。たとえば、特定の属性を持つすべての要素を選択するには、構文：要素[属性]を使用できます。特定の属性値を持つ要素を選択するには、Syntax：element [attribute = "value"]を使用できます。この機能は、特定の属性を備えた要素をさまざまな方法でスタイリングしたい場合に特に役立ちます。

CSSクエリを使用して複数の要素を一度に選択できますか？

はい、CSSクエリを使用すると、コンマを使用して複数の要素を一度に選択できます。たとえば、構文：H1、H2、H3 {色：赤}は、すべてのH1、H2、およびH3要素を選択し、それらに赤色を適用します。この機能は、同じスタイルを複数の要素に適用する場合に役立ちます。

CSSクエリを使用して子要素を選択する方法は？

cssクエリでは、＆gt;を使用して子要素を選択できます。たとえば、構文：div＆gt;これは、子要素のスタイルを親要素のスタイルと区別したい場合に役立ちます。

CSSクエリを使用して、要素の状態に基づいて選択できますか？

はい、CSSクエリを使用すると、要素の状態に基づいて選択するために擬似クラスを使用できます。たとえば、構文：a：hover {color：red}は、すべての要素をホバリングするときにそれらを選択し、それらに赤色を適用します。この機能は、インタラクティブなWebページを作成するのに非常に役立ちます。

CSSクエリを使用して兄弟要素を選択する方法は？

CSSクエリを使用すると、オペレーターを使用して兄弟要素を選択できます。たとえば、構文：div Pは、div要素の直後にp要素を選択します。この機能は、HTMLドキュメントにある場所に基づいて要素をスタイリングする場合に役立ちます。

CSSクエリを使用して、HTMLドキュメントの要素がどこにあるかに基づいて選択できますか？

はい、CSSクエリを使用すると、first-child、：last-child、および：nth-child（n）などの擬似クラスを使用して、HTMLドキュメント内の要素に基づいて選択します。たとえば、構文：P：first-child {color：red}は、最初のp要素を選択し、赤色を適用します。この機能は、動的でインタラクティブなWebページを作成するのに役立ちます。

CSSクエリを使用して、要素のタイプに基づいて選択する方法は？

CSSクエリを使用すると、要素タイプとして要素タイプを使用して、要素のタイプに基づいて選択できます。たとえば、構文：p {color：red}はすべてのp要素を選択し、それらに赤色を適用します。この機能は、特定のタイプのすべての要素を同じ方法でスタイリングしたい場合に役立ちます。

CSSクエリを使用して、要素のクラスまたはIDに基づいて選択できますか？

はい、CSSクエリを使用すると、要素のクラスに基づいて選択し、＃オペレーターを使用して要素のIDに基づいて選択できます。たとえば、syntax：.class {color：red}は、クラス「クラス」のあるすべての要素を選択し、赤色を適用します。同様に、syntax：#id {color：red}は、ID "ID"を持つ要素を選択し、赤色を適用します。この機能は、特定の要素のスタイルを他の要素のスタイルと区別したい場合に役立ちます。

CSSクエリを使用して、特定のセレクターと一致しない要素を選択する方法は？

CSSクエリを使用すると、次の：not（）pseudo-classを使用して、特定のセレクターと一致しない要素を選択できます。たとえば、構文：p：not（.class）{color：red}は、クラス「クラス」を持たないすべてのP要素を選択し、赤色を適用します。この機能は、特定のセレクターに一致する要素を除くすべての要素をスタイリングする場合に役立ちます。

以上がcssquery（）：CSSセレクターを使用してDOMをクエリしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。