JAvascriptベースの検索要素の詳細(アクセスノード)

もちろんこれらのセレクタはjQuery拡張のいくつかの方法ですが、原生jsを使用する場合はどのように要素を検索しますか?今日は簡単に整理してみましょう.
DOMは、一般的に使用されているgetElementById()のほかに、getElementsByTagName()とgetElementsByName()の様々な要素を検索する方法を定義しています.これらの方法では、htmlドキュメント内の任意のhtml要素を検索できます.
getElementById()まずgetElementById()を見てみましょう.この方法は簡単です.htmlページのidが一意であるため、この方法は単一の要素オブジェクトを返します.例:

 
  
span   
  
  
  <br>     var oSpan = document.getElementById('span1'); //  span   
  <br>     alert(oSpan.innerHTML); //  span       
  <br>  
  
 
 

getElementsByTagName()getElementsByTagName()パラメータはhtmlタグ名を入力する必要があります.htmlドキュメント内のすべての一致する要素のリストを返します.このリストは一部の配列の特性を持つため、クラス配列とも呼ばれます.特定の要素を操作したい場合は、配列インデックスまたはitem()を使用して実装できます.たとえば、次のようになります.

 
  
 
  <br>     var oDiv = document.getElementsByTagName('div'); //    div  ,         
  <br>     /*        */ 
  <br>     alert(oDiv[0].innerHTML) //     div     
  <br>     alert(oDiv.item(1).innerHTML) //     div     
  <br>  
  
 
 

もちろん、lengthプロパティを使用してノードをループすることもできます.

 
  
 
  <br>     var oDiv = document.getElementsByTagName('div'); 
  <br>     for(var i = 0; i < oDiv.length; i++){ 
  <br>         //do something 
  <br>     } 
  <br>  
  
 
 

getElementsByName()getElementsByName()は、フォーム要素を検索するためによく使用されます.パラメータにhtmlタグのname属性値が入力されます.ドキュメント内の複数のhtmlタグのname値が同じ(ラジオボタンなど)場合があるため、このメソッドは要素リストを返します.具体的な操作方法はgetElementsByTagName()と似ていますが、ここでは説明しません.

 
  
 
  <br>     var oIpt= document.getElementsByName('city'); //  name  city    
  <br>     alert(oIpt[0].value); 
  <br>     alert(oIpt.item(1).value); 
  <br>  
  
 
 

getByClass()は、上記のいくつかの方法で一般的なニーズを満たすことができますが、要素ノードへのアクセスを容易にするために、classを使用して要素を検索する方法を独自にカプセル化します.

 
  
 
  <br>     /** getByClass **/ 
  <br>     function getByClass(oParent, sClass){ 
  <br>         var aEle = oParent.getElementsByTagName('*'); 
  <br>         var re = new RegExp('\\b' + sClass + '\\b'); 
  <br>         var aResult = []; 
  <br>         for(var i = 0; i < aEle.length; i++){ 
  <br>             if(re.test(aEle[i].className)){ 
  <br>                 aResult.push(aEle[i]); 
  <br>             } 
  <br>         } 
  <br>         return aResult; 
  <br>     } 
  <br>  
  
 
 

getByClassは、oParentが参照ノード、すなわちoParentノードで要素を検索し、sClassが検索する要素classの値である2つのパラメータを入力する必要があります.oParent内のhtmlタグのclass値と入力したsClass値をループすることで、条件に合致するものは配列aResultに格納され、最後にこの配列に戻ります.
なお、ここでは、aEle[i]を直接用いることなく正則でマッチングする.className==sClassは、ラベルのclass値が複数の場合、一致が無効になることを回避します.