ホームページ > 記事 > ウェブフロントエンド > page_javascript スキルで同じクラスノードを取得するための JavaScript クロスブラウザメソッド

page_javascript スキルで同じクラスノードを取得するための JavaScript クロスブラウザメソッド

WBOYオリジナル: 2016-05-16 16:11:271184ブラウズ

Web ページを開発する場合、同じクラス名の要素、つまり同じクラスの要素を操作する必要があることがよくあります。昨日筆記試験を受けましたが、関連する質問に答えることができませんでした:

JavaScript はページ内のクラステストを持つノードを取得します

そこで、いくつかの関連情報を収集し、より良いと思われる 2 つの方法をこの記事にリストしました。欠点がある場合は、皆さんに批判して修正していただければ幸いです。もっと良い方法があれば、共有していただければ幸いです。

ソリューション 1 Jeremy Keuth ソリューション

Jeremy Keuth おじさんは、書籍『The Art of JavaScript DOM Programming (第 2 版)』(英語: DOM Scripting-Web Design with JavaScript and the Document Object Model) の第 3 章、セクション 4 で getElementsByClass メソッドについて説明しました。また、この属性をサポートしていないブラウザ (IE6、IE7、および IE8 は無視しましょう) でこのメソッドを適用する方法についても説明しています。抜粋はここにありますが、いくつかの場所は変更されています。

HTML5 DOM には、クラス属性のクラス名を通じて要素にアクセスできる新しいメソッドがあります。このメソッドは比較的新しいため、一部の DOM 実装ではまだ使用できません。ご使用の際はご注意ください。まず、この方法で何ができるかを見てから、この方法を確実に使用する方法について説明します。
getELementsByTagName メソッドと同様に、getElementsByClassName はクラス名である 1 つのパラメーターのみを受け入れます:

コードをコピーコードは次のとおりです:

getElementsByClassName(クラス)

このメソッドの戻り値も getElementsByTagName と似ており、同じクラス名を持つ要素の配列です。次のコード行は、クラス名が「sale」であるすべての要素を含む配列を返します。

コードをコピーコードは次のとおりです:

document.getElementsByClassName("セール")

このメソッドを使用して、複数のクラス名を持つ要素を検索することもできます。複数のクラス名を指定するには、文字列引数内でクラス名をスペースで区切るだけです。たとえば、次のコード行を <script> タグに追加します。 <br><br><div class="codetitle"><span>コードをコピー<a style="CURSOR: pointer" data="71155" class="copybut" id="copybut71155" onclick="doCopy('code71155')"><u></u> コードは次のとおりです:</a></span></div> alert(document.getElementsByClassName("セール重要").length);<div class="codebody" id="code71155"> <br><br> </div>完全なコード<p><strong> </strong></p> <p></p> <div class="codetitle"><span>コードをコピーします<a style="CURSOR: pointer" data="10676" class="copybut" id="copybut10676" onclick="doCopy('code10676')"><u></u> コードは次のとおりです:</a></span></div> <!DOCTYPE html><div class="codebody" id="code10676"> <br> <頭><br> <メタ文字セット="utf-8"> <title>買い物リスト</title><br> </頭> <br> <br> <h1>何を買うか</h1><br> <p title="優しいリマインダー">これを忘れずに購入してください。</p><br> <ul id="購入"><br> </ul><br> <スクリプト><br> alert(document.getElementsByClassName("セール重要").length);<br> </script>

「重要」と「セール」の両方のクラス名を持つ要素は 1 つだけであるため、警告ボックスに 1 が表示されます。これは 1 つの要素だけが一致することを示します。なお、要素のclass属性のクラス名の順序がパラメータで指定した「セール重要」ではなく「セール重要」であっても要素はマッチングされます。クラス名の実際の順序が重要ではないだけでなく、要素にさらに多くのクラス名があるかどうかも問題ではありません。 getELementsByTagName を使用するのと同じように、getElementsByClassName と getElementById を組み合わせて使用することもできます。クラス名に test が含まれるリスト項目が、id Purchase の要素内にいくつあるかを知りたい場合は、まずその特定のオブジェクトを見つけてから、getElementsByClassName:
を呼び出します。

コードをコピー

コードは次のとおりです:

var shopping=document.getElementById("購入");

var sales = shopping.getElementsByClassName("sale");

このように、sales 配列には、「purchase」リストの「sales」クラスを持つ要素のみが含まれます。次のコード行を実行すると、sales 配列に 2 つの項目が含まれていることがわかります。

コードをコピーしますコードは次のとおりです:

アラート(sales.length);

この getELementsByClassName メソッドは非常に便利ですが、新しいブラウザ (Safari 3.1、Chrome、Firefox 3、Opera 9.5 以降) のみがサポートしています。この欠点を補うために、DOM スクリプトプログラマは既存の DOM メソッドを使用して独自の getElementsByClassName を実装する必要があります。これは通過儀礼のようなものです。ほとんどの場合、その実装プロセスは以下の getElementsByClassName とほぼ同様です。この関数は古いブラウザーと新しいブラウザーの両方に適用できます。

コードをコピーしますコードは次のとおりです:

function getElementsByClassName(ノード,クラス名){

If(node.getElementsByClassName){

return node.getElementsByClassName(クラス名);

}その他{

var results = [];

var elems = node.getElementsByTagName("*");

for(var i=0;i
If(elems[i].className.indexOf(クラス名)!=-1){

results[results.length]=elems[i];

}

}

結果を返します;

}

}

この getElementsByClassName 関数は 2 つのパラメーターを受け入れます。最初のノードは DOM ツリー内の検索の開始点を表し、2 番目のクラス名は検索されるクラス名です。適切な getElementsByClassName 関数が受信ノードにすでに存在する場合、この新しい関数は対応するノードリストを直接返します。 getElementsByClassName 関数が存在しない場合、この新しい関数はすべてのタグをループし、対応するクラス名を持つ要素を検索します。

このメソッドの欠点は、複数のクラス名では機能しないことです。

この関数を使用して買い物リストを取得する前の操作をシミュレートする場合は、次のように記述できます:

コードをコピーコードは次のとおりです:

var shopping=document.getElementById("購入");

var sales = shopping.getElementsByClassName(shopping,"test");

console.log(販売);

したがって、記事の冒頭の質問を解決するために使用されるコードは次のとおりです:

コードをコピーコードは次のとおりです:

<頭>

    買い物リスト

何を買うか

これを忘れずに購入してください。

薄い豆

チーズ

牛乳

<スクリプト>
    function getElementsByClassName(ノード,クラス名){
        if(node.getElementsByClassName){
            return node.getElementsByClassName(クラス名);
        }その他{
            var results = [];
            var elems = node.getElementsByTagName("*");
            for(var i=0;i                if(elems[i].className.indexOf(クラス名)!=-1){
                   results[results.length]=elems[i];
               }
            }
            結果を返す;
        }
    }
    var body = document.getElementsByTagName("body")[0];
    var sales= getElementsByClassName(body,"sales");
    console.log(販売);

解決策 2 ロバート・ナイマン案

標準の DOM 要素を検索する方法も非常に多くありますが、真の高効率は無効です。Jeremy Keuth の大きな方法には、複数のクラス名には使用できないという欠点があります。2008 年、Robert Nyman の論文 The Ultimate GetElementsByClassName, Anno 2008 では独自の解決策が提供されています。2005 年に、Robert 氏は自身の getElementsByClassName の関数をすでに提供しており、2008 年にはコードの一部が変更され、多くの新しい機能が追加されました。

1.如果当前浏览器サポートgetElementsByClassName関数数，调用该原生関数；
2. 場合は、現在の検索ツールが XPath の使用をサポートしています。//小飞鱼: 検索ツール内の定位置 XML 文の広範な方法で、検索ツールはサポートされていません。
3. 多種類の検索をサポート、先後順;
4. 生成されたノードリストではなく、真の正しいノード数グループが返されます。 //小さな問題: 生成された getElementsByClassName メソッドが返すのは、NodeList オブジェクトであり、長さと番号インデックスのプロパティを含む画像数グループですが、数グループではありません。 Pop、push などの数値グループに特有のメソッド、Robert が提供するコードで、NodeList オブジェクトを数値グループに変換できます。

复制代码代码如下:

myList = Array.prototype.slice.call (myNodeList)

これはロバートの最も卑劣な方法ですが、いくつかの部分はあまりにも白っぽくないので、私たちが再調査して再リフレッシュするのを待っています。

复制代码代码如下:

/*

ロバート・ナイマンによって開発されました、http://www.robertnyman.com

コード/ライセンス: http://code.google.com/p/getelementsbyclassname/

*/

var getElementsByClassName = 関数 (クラス名、タグ、elm){

    if (document.getElementsByClassName) {

        getElementsByClassName = 関数 (クラス名、タグ、elm) {

            ニレ = ニレ ||ドキュメント;

            var elements = elm.getElementsByClassName(className),

                ノード名 = (タグ)?新しい RegExp("\b" タグ "\b", "i") : null,

                returnElements = [],

                現在;

            for(var i=0, il=elements.length; i
                現在 = 要素[i];

                if(!nodeName || nodeName.test(current.nodeName)) {

                    returnElements.push(現在);

                }

            }

            return returnElements;

        };

    }

    else if (document.evaluate) {

        getElementsByClassName = 関数 (クラス名、タグ、elm) {

            タグ = タグ || "*";

            ニレ = ニレ ||ドキュメント;

            var クラス = className.split(" "),

                classToCheck = "",

                xhtmlNamespace = "http://www.w3.org/1999/xhtml",

                namespaceResolver = (document.documentElement.namespaceURI === xhtmlNamespace)? xhtml名前空間 : null,

                returnElements = [],

                要素、

                ノード;

            for(var j=0, jl=classes.length; j
                classToCheck = "[contains(concat(' ', @class, ' '), ' " クラス[j] " ')]";

            }

            {
 を試してください
                elements = document.evaluate(".//" タグclassesToCheck, elm, namespaceResolver, 0, null);

            }

            キャッチ (e) {

                elements = document.evaluate(".//" タグclassesToCheck, elm, null, 0, null);

            }

            while ((node = elements.iterateNext())) {

                returnElements.push(node);

            }

            return returnElements;

        };

    }

    他 {
        getElementsByClassName = 関数 (クラス名、タグ、elm) {

            タグ = タグ || "*";

            ニレ = ニレ ||ドキュメント;

            var クラス = className.split(" "),

                クラスチェック = [],

                要素 = (タグ === "*" && elm.all)? elm.all : elm.getElementsByTagName(タグ),

                現在、

                returnElements = [],

                一致;

            for(var k=0, kl=classes.length; k
                classToCheck.push(new RegExp("(^|\s)" クラス[k] "(\s|$)"));

            }

            for(var l=0, ll=elements.length; l
                現在 = 要素[l];

                一致 = false;

                for(var m=0, ml=classesToCheck.length; m
                    match =classesToCheck[m].test(current.className);

                    if (!match) {

                        休憩;

                    }

                }

                if (一致) {

                    returnElements.push(現在);

                }

            }

            return returnElements;

        };

    }

    return getElementsByClassName(クラス名, タグ, elm);

};

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：JS花火背景エフェクト実装方法_JavaScriptスキル次の記事：JS花火背景エフェクト実装方法_JavaScriptスキル

続きを見る

page_javascript スキルで同じクラス ノードを取得するための JavaScript クロスブラウザ メソッド

何を買うか

関連記事

page_javascript スキルで同じクラスノードを取得するための JavaScript クロスブラウザメソッド