DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 用原生JS獲取CLASS對象(很簡單實用)
用原生JS獲取CLASS對象(很簡單實用)
編輯:關於JavaScript     

聽說是最常用。。。。我是看了dom編程藝術想到的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title>無標題文檔</title> 

<style> 

.ca{background-color:red; padding:20px;} 

.js{ border:1px solid #00F; padding:10px;} 

</style> 

</head> 


<body> 

<div class="ca"> 

sss 

</div> 

<div class="js" id="as"> 

</div> 

<div class="bd"> 

</div> 

<div class="ca"> 

</div> 

</body> 

</html> 

<script> 

function getElementsClass(classnames){ 
var classobj= new Array();//定義數組 

var classint=0;//定義數組的下標 

var tags=document.getElementsByTagName("*");//獲取HTML的所有標簽 

for(var i in tags){//對標簽進行遍歷 

if(tags[i].nodeType==1){//判斷節點類型 

if(tags[i].getAttribute("class") == classnames)//判斷和需要CLASS名字相同的,並組成一個數組 

{ 

classobj[classint]=tags[i]; 

classint++; 

} 

} 

} 

return classobj;//返回組成的數組 

} 


//以下就是測試了 

var a=getElementsClass("ca"); 

a[0].onclick=function(){alert("我們來了");} 

a[1].innerHTML='我們來了'; 

</script>

有時候會有多個dom的class相同,可以這樣處理:

復制代碼 代碼如下:
var a=getElementsClass("ca");
for(var i=0;i<a.length;i++){
(function(i){
alert(a[i])
})(i)
}

如果有多個相同的class也可以一起用了,如果是想達到JQ哪裡可以直接.click還需要做一些比較復雜的處理

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved