JS-DOM元素灵活查找-优快云博客

本文介绍了一种通过className选择DOM元素的方法，并将其封装为函数。利用此函数可以方便地选取具有特定class属性的元素并进行样式修改。此外，还提供了一个示例，展示了如何通过点击事件隐藏带有“隐藏”链接的列表项。

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