zoukankan      html  css  js  c++  java
  • JS-DOM元素灵活查找

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

  • 相关阅读:
    [LeetCode] 143. 重排链表
    [LeetCode] 342. 4的幂
    [LeetCode] 1744. 你能在你最喜欢的那天吃到你最喜欢的糖果吗?
    [LeetCode] 148. 排序链表
    [LeetCode] 525. 连续数组
    [LeetCode] 160. 相交链表
    [LeetCode] 134. 加油站
    [LeetCode] 474. 一和零
    CentOS 升级 OpenSSH
    AWS 证书取消挂靠
  • 原文地址:https://www.cnblogs.com/919czzl/p/4314359.html
Copyright © 2011-2022 走看看