JS-DOM元素灵活查找

时间:2021-01-22 00:07:36

用className选择元素

封装成函数

<title>无标题文档</title>
<script>
/*
window.onload=function ()
{
var oDiv=document.getElementById('div1');
var aLi=document.getElementsByTagName('li'); for(var i=0;i<aLi.length;i++)
{
if(aLi[i].className=='box')
{
aLi[i].style.background='red';
}
}
}*/
//函数封装
function getByClass(oParent,sClass)
{
var aResult=[];
var aEle=oParent.getElementsByTagName('*'); for(var i=0;i<aEle.length;i++)
{
if(aEle[i].className==sClass)
{
aResult.push(aEle[i]);
}
}
return aResult;
}
window.onload=function ()
{
var oDiv=document.getElementById('div1');
var aBox=getByClass(oDiv,'box'); for(var i=0;i<aBox.length;i++)
{
aBox[i].style.background='green';
}
}
</script>
</head> <body>
<ul id="div1">
<li class="box"></li>
<li></li>
<li class="box"></li>
<li></li>
<li></li>
<li></li>
<li class="box"></li>
</ul>
</body>

JS-DOM元素灵活查找

<title>无标题文档</title>
<script>
window.onload=function ()
{
var aA=document.getElementsByTagName('a');
for(var i=0;i<aA.length;i++)
{
aA[i].onclick=function ()
{
this.parentNode.style.display='none';
};
}
};
</script>
</head> <body>
<ul id="ull">
<li>2352345 <a href="javascript:;">隐藏</a></li>
<li>34654745 <a href="javascript:;">隐藏</a></li>
<li>sdfger <a href="javascript:;">隐藏</a></li>
<li>dsbfsd <a href="javascript:;">隐藏</a></li>
<li>dfs <a href="javascript:;">隐藏</a></li>
<li>436547<a href="javascript:;">隐藏</a></li>
</ul>
</body>

JS-DOM元素灵活查找