JS-DOM元素灵活查找

浏览数：30 / 时间：2015年06月09日

用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>

技术分享

<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>