page_javascript スキルのクラステストですべてのノードを検索するメソッド

はじめに

アリババの Web フロントエンド インターン生がオンライン試験を受けています。確かに、初心者としては、まず知識を補充したほうがよいでしょう。そこでBaidu GoogleがAlibabaの過去の学校採用のフロントエンドの筆記試験問題を検索したのですが、本当に軽蔑されていて全く理解できないと感じました。ああ、Alibaba の Web フロントエンドはオンライン筆記試験です。Baidu や Google にチャンスを与えてくれますか?

この質問を見たとき、jquery のように、よく使われるメソッドのいくつかをカプセル化する必要があると感じました。ブラウザの互換性を実現するためのメソッドやツールを作成することは、将来の開発に確かに有益です。

HTML

説明の便宜上、まず HTML を記述します

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

find me

また、find me

🎜>

CSS を省略しました。ここでの焦点は、CSS スタイルの記述方法ではなく、JavaScript を使用してスタイル名からノード コレクションを検索することです。

実装されたメソッド

1 getElementsByClassName

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

console.log(document.getElementsByClassName("A"));
console.log(document.getElementsByClassName("A B"));

出現 (firefox 27.0)



確かにこの方法で上記の問題は解決できると思いますが、互換性を見て別の方法を見つけた方が良いと思います。



2 querySelectorAll

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

console.log(document.querySelectorAll (".A"));
console.log(document.querySelectorAll (".B,.A"));

結果がどうなるか見てみましょう?上記との違いは何ですか？



2 番目の結果は異なります。querySelectorAll パラメーターが 2 つある場合、それらはカンマで区切る必要があることがわかります。実際には、スタイルまたはが存在することを意味します。 B スタイル。すべてのノードを一致させることができます。

実際、この方法の互換性はあまり良くありません



上記の互換性の問題に基づいて (結局のところ、中国のブラウザー ie6/7/まだ 8 が大半を占めています)、それを実装するメソッドを自分で作成したほうがよいでしょう。

3 queryNodesByClass

最初に私のアイデアについて話すべきだと思います

(1) まずページ全体の各ノードを取得します
(2) 各ノードを走査し、 className 文字列を取得します
(3) className 文字列を操作するには、まずスペースを含む配列に分割し、次にオブジェクトを使用してそのキーを各配列要素に設定します。その後、対応する値は true
(4) ）問題は、渡したパラメータに基づいて配列に変換することです（たとえば、1 つのパラメータは「selector」、2 つのパラメータは「selector_1 selector_2」など）、各配列要素は以前と同様に使用されます。ノード className 文字列に対応するオブジェクトのキー値。一致する場合は true、一致しない場合は未定義です。

ここでコードを入力します

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

function StringToObj(string){

var arr = string.split(" ").sort();
var result = {}; arr [i];i--){
結果[arr[i]] = true;
}
結果を返す

コードをコピーします

コードは次のとおりです: function StringToArray(string){ var arr = string.split( " "); 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//対応するアイデア (3) は StringToObj メソッドの役割です。
var dom_cname = StringToObj(all[i].className),cname_len = cname.length;
for(var j=0;jif(!dom_cname[cname[j]])
break;
}
if(j == cname_len)
{
result.push(all[i]) ;
}}
結果を返す
}