getElementsByClassName()の使い方の詳細

11459 ワード

element

getElementsByClassName()の使い方の詳細:
プログラミングでは、次の方法でオブジェクトを取得することに慣れています.

getElementById('id')
getElementsByName('name')
getElementsByTagName('tag')

1つ目はid値を指定したオブジェクトを取得でき、2つ目は指定したname属性値を持つオブジェクトセットを取得でき、3つ目は指定したラベル名を取得したオブジェクトセットである.この3つの方式はコードを書く上で非常によく使われており、もちろん非常に便利で、この時多くの友达はclass属性をラベルの常用属性として、制定したclass属性値を通じて対象を得る方法があるかどうかと思っているかもしれませんが、実はこのような方法はないわけではありません.

getElementsByTagName("class")

この方法は、classプロパティ値を指定したオブジェクトのセットを取得できる機能を実現しますが、残念ながらブラウザの互換性に問題があります.コードの例は次のとおりです.

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>getElementsByClassName()    -    </title>
<script type="text/javascript">
window.onload=function(){
  document.getElementsByClassName("mytest")[0].style.color="#F00";
}
</script>
</head>
  
<body>
  <div class="mytest">   </div>
</body>
</html>

上記のコードは、Google、火狐、IE 8以上のブラウザで完全に実行できますが、IE 8およびIE 8以下のブラウザではサポートされていません.将来、低バージョンのIEブラウザが市場から撤退した後、この関数は意気揚々としているに違いないが、現在は直接この関数を使用しないほうがいいが、シミュレーションで実現することができる.
コードの例は次のとおりです.

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>getElementsByClassName()    -    </title>
<script type="text/javascript">
var getElementsByClass=function(searchClass,node,tag){
  var classElements=new Array();
  if(node==null){
    node=document;
  }
  if(tag==null){
    tag='*';
  }
  var els=node.getElementsByTagName(tag);
  var elsLen=els.length;
  var pattern=new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
  for(i=0,j=0;i<elsLen;i++) {
   if(pattern.test(els[i].className)){
    classElements[j]=els[i];
    j++;
   }
  }
  return classElements;
}
window.onload=function(){
  getElementsByClass("haha")[0].style.color="#F00";
}
</script>
</head>
<body>
  <div class="mytest haha">   </div>
</body>
</html>

以上のコードシミュレーションではgetElementsByClassName()機能が実装されています.次に、この機能を実装する方法を簡単に説明します.1.実装原理:getElementsByTagName()関数を使用して対応するオブジェクトのセットを取得し、forループ文を使用して各オブジェクトを巡り、pattern.test()を使用してオブジェクトのclassName属性値が正規表現で一致する内容を含むかどうかを検出します.ある場合は、指定したclass属性値を持つオブジェクトがclassElements配列に格納され、最後にこの配列が返されます.この配列の要素は、指定したclass属性値を持つオブジェクトです.二.コード注記:1.var classElements=new Array()は、指定したclass属性値を持つオブジェクトを格納する配列を作成します.2.if(node=null)は、ノードが指定されているかどうかを判断し、指定されていない場合はdocumentをデフォルトノードとして使用します.getElementsByTagName()の検索範囲を指定します.3.if(tag=null)は、ラベル名が指定されているかどうかを判断し、ない場合はワイルドカード(*)を使用します.つまり、すべてのラベルを取得します.4.var els=node.getElementsByTagName(tag)は、指定したノードの下に指定したラベル名を持つオブジェクトを取得します.5.var elsLen=els.length、オブジェクトの数を取得します.6.var pattern=new RegExp("(^|\s)"+searchClass+"(\s|$)")は、与えられたclass属性値を持つオブジェクトを取得する方法を規定する正規オブジェクトを作成します.ここでは一定の正規表現の知識が必要です.以上のルールを使用するのは、class=「mytest hahaha」という形式のclass属性値と、取得するclass属性値が1つのclass属性値に含まれることを防止するためであり、例えば、1つのclass=「haorenyisheng」、もう1つのclass=「hao」、例えば「hao」を取得すると、「haorenyisheng」は一致しません.7.forループは、各オブジェクトを容易にするclassName属性値(class属性値)を実行し、一致ルールに合致するかどうかを検出し、該当する場合はclassElements配列に格納します.8.return classElementsは、配列オブジェクト、すなわちclass属性値を指定したオブジェクトを返します.9.getElementsByClass("haha")[0].style.color="#F 00"class属性値が"haha"のオブジェクトのフォント色を#F 00に設定します.

Socketプログラミング-1 V 1チャット

Webshellを利用してsocksエージェントを構築する[黒い雲]