標籤：html head 數組 res classname 封裝 charset tag tle
用className選擇元素
（1）如何用className選擇元素
選出所有元素
通過className條件式篩選
<!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>用className來選取元素</title>
<style>
</style>
<script>
window.onload = function ()
{
var oUl=document.getElementById(‘ul1‘);
var aLi=oUl.getElementsByTagName(‘li‘);
for(var i=0;i<aLi.length;i++)
{
if(aLi[i].className==‘box‘)
{
aLi[i].style.background=‘red‘;
}
}
};
</script>
</head>
<body>
<ul id="ul1">
<li class="box"></li>
<li class="box"></li>
<li></li>
<li></li>
<li></li>
<li class="box"></li>
<li></li>
</ul>
</body>
</html>
（2）封裝成函數
<!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>
</style>
<script>
/*通用函數*/
/*用oParent是因為要從元素的父級來取元素本身，sClass就是要尋找元素的className,告訴函數所需要的class具體是什麼*/
function getByClass (oParent,sClass)
{
var aResult=[];/*先設定一個空數組，把每一個找到的元素先堆到裡面*/
var aEle=oParent.getElementsByTagName(‘*‘);/*"*"萬用字元代表所有的標籤，*/
for(var i=0;i<aEle.length;i++)
{
/*如果迴圈到的標籤的className正好是sClass所傳遞進來的className*/
if(aEle[i].className==sClass)
{
/*，把每一個找到的元素先堆到裡面*/
aResult.push(aEle[i]);
}
}
/*直接把一個數組傳遞出去*/
return aResult;
};
window.onload = function ()
{
var oUl=document.getElementById(‘ul1‘);
var aBox=getByClass(oUl,‘box‘);/*直接調用函數，選取oUl下的className為box的東西*/
for(var i=0;i<aBox.length;i++)
{
aBox[i].style.background=‘red‘;
}
};
</script>
</head>
<body>
<ul id="ul1">
<li class="box"></li>
<li class="box"></li>
<li></li>
<li></li>
<li></li>
<li class="box"></li>
<li></li>
</ul>
</body>
</html>
【JS學習筆記】DOM元素靈活尋找
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
