首页 > 代码库 > 【JS学习笔记】DOM元素灵活查找
【JS学习笔记】DOM元素灵活查找
用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元素灵活查找