DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> js document.getElementsByClassName的使用介紹與自定義函數
js document.getElementsByClassName的使用介紹與自定義函數
編輯：關於JavaScript
getElementsByClassName()是HTML5 新增的DOM API。IE8以下不支持搜索。
getElementByClassName()函數的使用方法：
使用JavaScript訪問DOM的一個重大問題是,此過程需要一種通過元素類名稱來選擇類的類函數,對DOMContentReady,這種類函數的缺失導致開發人員需要自己編寫自定義腳本業執行上述任務,許多這個類腳本都是圍繞著getElementByClassName()建立的,這種解決方法在HTML5中被標准化,另外,這種方法還本地存在於現代浏覽器中,GetElementByClassName()只使用一個字符串值作為輸入.並返回一個Nodelist,這個NodeList包含所有類名稱匹配這個字符串值的元素:
var el = document.getElementsByClassName('foo');
通過在字符串中使用空格分隔類,也可以匹配多個類,下面的代碼挑選出了所有既擁有foo類名稱又擁有bar類名稱的元素:
var el = document.getElementsByClassName('foo bar');
W3C沒有getElementByClassName這個函數，我們可以自己定義一個函數來模擬它。
一般如下幾種方法：
1、要不就是使用jquery來實現
2、通過自定義函數解決
class單個時 如class="test"
function getElementsByClassName (className) {
var all = document.all ? document.all : document.getElementsByTagName('*');
var elements = new Array();
for (var e = 0; e < all.length; e++) {
if (all[e].className == className) {
elements[elements.length] = all[e];
break;
}
}
return elements;
}
代碼二、
function getElementsByClassName(className,parent){
var oParent=parent?document.getElementById("parent"):document;
var oLis=oParent.getElementsByTagName("*");
var arr=[];
for(var i=0;i<oLis.length;i++){
if(oLis[i].className==className){
arr.push(oLis[i])
};
return arr;
}
};
class有多個的時候同樣匹配,如class="test1 test2 test3"
function getElementsByClassName (className) {
var all = document.all ? document.all : document.getElementsByTagName('*');
var elements = new Array();
for (var e = 0; e < all.length; e++) {
var classList = all[e].className.split(" ");
for(var i=0;i<classList.length;i++){
if (classList[i] == className) {
elements[elements.length] = all[e];
break;
}
}
}
return elements;
}
下面再附一個完整的測試代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8' />
<script>
/*JS寫getElementByClassName;
我發現chorm、firefox、ie都支持document.getElementsByClassName */
window.onload = function(){
var adom = document.getElementsByClassName('a1');
for(var i = 0;i<adom.length;i++)
adom[i].style.backgroundColor="red";
};
function getElementByClassName(className){
var elems = [];
if(!document.getElementsByClassName){
alert("no exit");
var dom = document.getElementByTagName('*');
for(var i = 0;i<dom.length;i++){
if(dom[i].className == className)
elems.push(dom[i]);
}
}else{
elems = document.getElementsByClassName(className);
alert('exit');
}
return elems;
}
</script>
</head>
<body>
<div id="a1">a1</div>
<div class="a1">a1</div>
<div class="a1">a1</div>
<div id="a1">a1</div>
<div class="a1">a1</div>
</body>
</html>
效果如圖所示：
小編推薦
熱門推薦