JSにとって、私はそれに慣れていないすべての人が文句を言うべきだと思います：なぜクラスを通して要素を得る方法がないのか。ブラウザのより高いバージョンは、GetElementsByClassName（）関数をサポートするようになりましたが、ブラウザの低いバージョンにはまだ互換性がありません。他のライブラリを離れる場合、自分でメソッドをカプセル化する必要があります。
方法1
関数getByClass1（parent、cls）{var res = []; //一致する結果を保存する配列var ele = parent.getelementsbytagname（ '*'）; for（var i = 0; i <ele.length; i ++）{if（ele [i] .classname == cls）{res.push（ele [i]）; }} RESTRES;}もちろん、クラスに値が1つしかない場合、上記の方法は問題ありませんが、複数の値がある場合、問題が発生します。
<div> </div> <div> </div> <scrip> getByClass1（document、 'test'）; //最初のdiv </script>のみを取得します
方法2
問題が発生したら、改善しようとします。マルチクラス名の場合、定期的なマッチングを使用してクラス名が含まれているかどうかを確認できます。したがって、次の書き込み方法が表示されます。
関数getByClass2（parent、cls）{var res = []; var reg = new regexp（ '// b' + cls + '// b'、 'i'）; //一致するclsは独立した単語ですvar ele = parent.getelementsbytagname（ '*'）; for（var i = 0; i <ele.length; i ++）{if（reg.test（ele [i] .classname））{res.push（ele [i]）; }} RESTRES;}この方法は問題ないようで、GetByClass1（）の問題を解決しました。私はそれを長い間使用してきましたが、まだ隠されたバグがあります。次の例を参照してください。
<div> </div> <div> </div> <div> </div> <script> getByClass2（document、 'test'）; //結果は最初のdivと3番目のdiv </script>です
理論的には、最初のもののみを取得する必要がありますが、予想とは異なります。このバグは、次のコードで /bに由来します
var reg = new regexp（ '// b' + cls + '// b'、 'i'）;
最初に通常の /bの意味を見てみましょう
/bは、単語の開始または終了、つまり単語の境界を表す正規表現によって指定された特別なコードです。
簡単に言えば、 /bは単語を一致させることです（左の境界から右の境界まで）。
問題はここにあります。 /b文字、数字、およびアンダースコアを除く他のすべての文字を境界として見なします。上記の例では、3番目のクラスの値はテストボックスです。 /bが一致する場合、ハイフン（ - ）は単語の境界と見なされるため、3番目のdivとも一致します。
方法3
したがって、上記の方法をさらに改善する必要があります。ここでは、stackoverflowで言及された方法を参照してください。
JavaScriptでクラスごとに要素を取得する方法は？
改善されたコードは次のとおりです。
関数getByClass3（parent、cls）{var res = []; var reg = new regexp（ '' + cls + ''、 'i'）; // clsを一致させる場合、両側にスペースが必要ですvar ele = parent.getelementsbytagname（ '*'）; for（var i = 0; i <ele.length; i ++）{if（reg.test（ '' + ele [i] .classname + ''））{res.push（ele [i]）; }} RESTRES;}この方法は /bの使用を放棄し、スペースを使用して境界に一致します。最初に、取得したクラス名の両側にスペースを追加します。これにより、各値の両側にスペースがクラス名のスペースがあることが保証され、レギュラーを使用して一致します。
この方法を使用してまだ問題は発見されていませんが、それを使用する場合、メソッドの単一の引用符のスペースを削除する必要はありません。
方法4
関数getByClass3（parent、cls）{var res = []; var reg = new regexp（ '（^| // s）' + cls + '（$ | // s）'、 'i'）; var ele = parent.getelementsbytagname（ '*'）; for（var i = 0; i <ele.length; i ++）{if（reg.test（ele [i] .classname））{res.push（ele [i]）; }} RESTRES;}スペースは完全に規則的に処理され、簡単なスペースが落ちる問題を排除し、コードはより美しくシンプルです。
この方法は比較的完璧ですか？実際、そうではありません。より良い解決策を見てみましょう。
方法5（完全版）
記事の冒頭で述べたように、ブラウザのより高いバージョンは既にGetElementsByClassName（）メソッドをサポートしています。パフォーマンスの理由から、サポートされているブラウザにネイティブ方法を使用する方が良いでしょう。ブラウザの低いバージョンの場合、上記の方法4を使用します。
関数getByClass（parent、cls）{if（parent.getElementsByClassName）{return parent.getElementsByClassName（CLS）; } else {var res = []; var reg = new regexp（ '' + cls + ''、 'i'）var ele = parent.getelementsbytagname（ '*'）; for（var i = 0; i <ele.length; i ++）{if（reg.test（ '' + ele [i] .classname + ''））{res.push（ele [i]）; }} RESを返します。 }}もちろん、方法5は比較的良い解決策と見なされます。より良い方法がある場合は、メッセージを残して追加してください。