用原生JS獲取CLASS對象(很簡單實用)

更新時間：2014年10月15日 17:08:32 投稿：whsnow

這篇文章主要介紹了如何用原生JS獲取CLASS對象，看過dom編程藝術(shù)的朋友或許會知道的

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

<!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();//定義數(shù)組 

var classint=0;//定義數(shù)組的下標 

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

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

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

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

{ 

classobj[classint]=tags[i]; 

classint++; 

} 

} 

} 

return classobj;//返回組成的數(shù)組 

} 


//以下就是測試了 

var a=getElementsClass("ca"); 

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

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

</script>

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

復(fù)制代碼代碼如下:

var a=getElementsClass("ca")； 

for(var i=0;i<a.length;i++){ 

(function(i){ 

alert(a[i]) 

})(i) 

}

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

您可能感興趣的文章:

相關(guān)文章

layui表格數(shù)據(jù)重載
這篇文章主要為大家詳細介紹了layui表格數(shù)據(jù)重載，根據(jù)條件查詢，監(jiān)聽按鈕事件，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-07-07
動態(tài)生成的IFRAME，設(shè)置SRC時的問題解決分析
動態(tài)生成的IFRAME，設(shè)置SRC時的，不同位置帶來的影響。以下所說的是在IE7下運行的。IE6下也是同樣。在這個blog中，直接點擊運行代碼，和把下面代碼保存到為網(wǎng)頁在運行（以本地文件或域名訪問），效果不一樣。先看例子：
2008-04-04
js異步接口并發(fā)數(shù)量控制的方法示例
這篇文章主要給大家介紹了關(guān)于js異步接口并發(fā)數(shù)量控制的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧
2020-11-11
Bootstrap學(xué)習筆記之css樣式設(shè)計(2)
這篇文章主要為大家詳細介紹了Bootstrap學(xué)習筆記之css樣式設(shè)計，感興趣的小伙伴們可以參考一下
2016-06-06
JavaScript異步上傳圖片文件的實例代碼
本文通過實例代碼給大家介紹了js異步上傳圖片文件的方法，包括html和jquery代碼，需要的的朋友參考下吧
2017-07-07
Javascript在IE或Firefox下獲取鼠標位置的代碼
由于Firefox和IE等瀏覽器之間對JS解釋的方式不一樣，F(xiàn)irefox下面獲取鼠標位置不能夠直接使用clientX來獲取。網(wǎng)上說的一般都是觸發(fā)mousemove事件才行。我這里有兩段代碼，思路都一樣，就是風格不同。
2009-12-12
JavaScript的遞歸之遞歸與循環(huán)示例介紹
對于不同類型的需要重復(fù)計算的問題，循環(huán)和遞歸兩種方法各有所長，能給出更直觀簡單的方案，下面為大家詳細的介紹下JavaScript的遞歸與循環(huán)，感興趣的朋友可以了解下
2013-08-08
alixixi runcode.asp的代碼不錯的應(yīng)用
alixixi runcode.asp的代碼不錯的應(yīng)用...
2007-08-08
JavaScript中高級語法??表達式用法示例詳解
這篇文章主要為大家介紹了JavaScript中高級語法??表達式用法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-04-04
JS中confirm,alert,prompt函數(shù)區(qū)別分析
JS中confirm,alert,prompt函數(shù)使用區(qū)別有哪些呢？
2011-01-01