原生jsの道——原生js編纂クラスセレクタ
2537 ワード
一、クラスセレクタの概念
クラスセレクタは、classプロパティを使用してノードを取得します.たとえばhtml構造では、3つのpタグがclass="red"の属性を持っている場合、クラスセレクタはこの3つのpタグを返します.
jqueryでは,$(".red")という方法でクラスに従ってノードを取得することが容易である.ただし、オリジナルjavascriptではgetElementById(id属性で要素を取得)、getElementsByTagName(ラベル名で要素を取得)などの方法があるが、クラスセレクタに関する方法はない.従って,原生js実装クラスセレクタを記述する方法は非常に重要である.
二、クラスセレクタの実現
原生jsを用いてクラスセレクタを記述することにより,jsにおけるDOM関連動作をより深く理解することができ,簡単なクラスセレクタがどのように実現されるかを見てみよう.
すべてのDOMノードを取得し、classプロパティが選択された値になり、配列に戻るgetElementsByClass()メソッドをカプセル化しました.このメソッドは、選択するclass値であるパラメータを渡します.
このクラスセレクタの実装方法は,まず取得したDOMノードを格納するための空の配列classobjを作成する.classint変数はインデックスの表示に使用され、配列操作が便利です.getElementsByTagName("*")メソッドを使用して、このページのすべてのDOMノードを取得しました(*はすべて一致しています).
すべてのDOMノードを取り出し,我々は判断できる.取得した各ノードをループし、nodeTypeが1(要素ノード)である場合、getAttribute(「class」)メソッドを使用してノードのclass属性値を取得し、渡されたclassパラメータと比較し、同じであれば、私たちが望むノードであることを説明し、事前に定義された配列に格納します.最後にこの配列を返せばいいです.
三、原生js類セレクタテスト
次に、独自に作成したクラスセレクタが正常に動作しているかどうかを検証します.テストコードは次のとおりです.
このコードは私たちが自分でカプセル化した方法でテストし、classがatestの要素を取得し、マウスが滑るとダイアログボックスがポップアップします.
カプセル化されたこのメソッドは、jqueryのsibling()メソッドと同様に、要素を選択するにはインデックスを追加する必要がある配列を返していることに注意してください.1つのページに複数の選択要素がある場合は、配列ループを使用して対応する操作を行います.
クラスセレクタは、classプロパティを使用してノードを取得します.たとえばhtml構造では、3つのpタグがclass="red"の属性を持っている場合、クラスセレクタはこの3つのpタグを返します.
jqueryでは,$(".red")という方法でクラスに従ってノードを取得することが容易である.ただし、オリジナルjavascriptではgetElementById(id属性で要素を取得)、getElementsByTagName(ラベル名で要素を取得)などの方法があるが、クラスセレクタに関する方法はない.従って,原生js実装クラスセレクタを記述する方法は非常に重要である.
二、クラスセレクタの実現
原生jsを用いてクラスセレクタを記述することにより,jsにおけるDOM関連動作をより深く理解することができ,簡単なクラスセレクタがどのように実現されるかを見てみよう.
function getElementsByClass(classnames){
var classobj = newArray();
var classint = 0;
var tags =document.getElementsByTagName("*");
for(var i in tags){
if(tags[i].nodeType == 1){
if(tags[i].getAttribute("class") == classnames){
classobj[classint] = tags[i];
classint++;
}
}
}
return classobj;
}すべてのDOMノードを取得し、classプロパティが選択された値になり、配列に戻るgetElementsByClass()メソッドをカプセル化しました.このメソッドは、選択するclass値であるパラメータを渡します.
このクラスセレクタの実装方法は,まず取得したDOMノードを格納するための空の配列classobjを作成する.classint変数はインデックスの表示に使用され、配列操作が便利です.getElementsByTagName("*")メソッドを使用して、このページのすべてのDOMノードを取得しました(*はすべて一致しています).
すべてのDOMノードを取り出し,我々は判断できる.取得した各ノードをループし、nodeTypeが1(要素ノード)である場合、getAttribute(「class」)メソッドを使用してノードのclass属性値を取得し、渡されたclassパラメータと比較し、同じであれば、私たちが望むノードであることを説明し、事前に定義された配列に格納します.最後にこの配列を返せばいいです.
三、原生js類セレクタテスト
次に、独自に作成したクラスセレクタが正常に動作しているかどうかを検証します.テストコードは次のとおりです.
<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
<title> </title>
<scriptsrc="classtest.js"></script>
<script>
window.onload =function(){
var a = getElementsByClass("atest");
a[0].onmouseover = function(){
alert("class!!");
}
}
</script>
<style>
.atest{background:blue;width:200px;height:200px;margin:40px;color:white;}
.btest{background:green;width:200px;height:200px;margin:40px;color:white;}
</style>
</head>
<body>
<divclass="atest">atestAAA</div>
<divclass="btest">atestBBB</div>
</html>このコードは私たちが自分でカプセル化した方法でテストし、classがatestの要素を取得し、マウスが滑るとダイアログボックスがポップアップします.
カプセル化されたこのメソッドは、jqueryのsibling()メソッドと同様に、要素を選択するにはインデックスを追加する必要がある配列を返していることに注意してください.1つのページに複数の選択要素がある場合は、配列ループを使用して対応する操作を行います.