序文
WebフロントエンドインターンであるAlibabaは、オンライン試験を受ける予定です。確かに、ルーキーに知識を追加したいと思います。そのため、BaiduとGoogleは、Alibabaのキャンパス募集に関する以前のフロントエンドの筆記テスト質問を受けており、彼らは本当に軽spされ、まったく理解できないと感じました。ああ、RibabaのWebフロントエンドはオンラインで筆記テストです。
この質問を見たとき、私はJqueryのように、一般的に使用されている方法のいくつかを実際にカプセル化すべきだと感じました。ブラウザの互換性またはツールクラスを実現するためのいくつかの方法が作成されています。これは、将来の開発に実際に有益です。
HTML
説明のために、最初にHTMLを書き留めましょう
コードコピーは次のとおりです。
<p>私を見つけてください</p>
<div>私も見つけます</div>
CSSは、CSSスタイルを使用する方法ではありません。
実装方法
1 getElementsByClassName
コードコピーは次のとおりです。
console.log（document.getElementsByClassName（ "A"））;
console.log（document.getElementsByClassName（ "ab"））;
結果が表示されます（Firefox 27.0）
確かに、この方法は上記の問題を解決できるはずだと思いますが、その互換性を見た後、別の方法を見つける方が良いはずです。
2 QuerySeLectorAll
コードコピーは次のとおりです。
console.log（document.queryselectorall（ ".a"））;
console.log（document.queryselectorall（ ".b、.a"））;
結果が何であるか見てみましょうか？上記の違いは何ですか？
2番目のものの結果は、2つのQuerySelectorallパラメーターがある場合、実際にはAまたはBスタイルのノードが一致することを意味します。
実際、この方法の互換性はあまり良くありません
上記の互換性の問題に基づいて（結局、私はまだ中国のブラウザIE6/7/8の大部分を説明しています）、私もそれを達成する方法をするかもしれません。
3 querynodesbyclass
私は最初に自分のアイデアについて話すべきだと思います
（1）最初にページ全体を取得します
（2）各ノードを反復し、そのクラス名文字列を取得します
（3）className文字列を操作し、最初にスペースを持つ配列に分割し、次にオブジェクトを使用して各配列要素にキーを設定します。
（4）現在、問題は渡されたパラメーターに基づいています（たとえば、1つのパラメーターは「セレクター」、2つは「selector_1 selector_2」など）、次にそれを配列に変換し、各配列要素は以前に使用されていましたが、以前のノードのクラス名文字列に対応するオブジェクトのキー値は、それが一致する場合、それが真であり、そうでない場合、未定義です。
今、私たちは私たちのコードを与えます
コードコピーは次のとおりです。
関数stringtoobj（string）{
var arr = string.split（ ""）.sort（）;
var result = {};
for（var i = arr.length-1; arr [i]; i-）{
result [arr [i]] = true;
}
返品結果;
}
コードコピーは次のとおりです。
関数StringToArray（String）{
var arr = string.split（ ""）.sort（）;
var result = [];
for（var i = arr.length-1; arr [i]; i-）{
result.push（arr [i]）;
}
返品結果;
}
コードコピーは次のとおりです。
function querynodesbyclass（classname）{
//思考（1）
var all = document.getElementsByTagname（ "*"）、len = all.length、result = [];
var cname = StringToArray（className）; //思考（4）
for（var i = 0; i <len; i ++）{//各ノードの対応するアイデアを転送（2）
//対応するのはアイデア（3）、つまりstringtoobjメソッドの役割です
var dom_cname = stringtoobj（all [i] .classname）、cname_len = cname.length;
for（var j = 0; j <cname_len; j ++）{
if（！dom_cname [cname [j]]）
壊す;
}
if（j == cname_len）
{
result.push（all [i]）;
}}
返品結果;
}