码迷,mamicode.com
首页 > Web开发 > 详细

JS-DOM元素灵活查找

时间:2015-03-04 22:39:52      阅读:153      评论:0      收藏:0      [点我收藏+]

标签:

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

技术分享

JS-DOM元素灵活查找

标签:

原文地址:http://www.cnblogs.com/919czzl/p/4314359.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!