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>

  • 相关阅读:
    Oracle数据库中。varchar 和 varchar2的区别
    gvim 编辑器初学
    鼠标事件以及clientX、offsetX、screenX、pageX、x的区别
    清除浮动的5种方法
    按钮的单双击事件
    webstrom中的快捷键
    限制 input 输入框只能输入纯数字
    控制<标签>不可被点击
    way.js
    ECharts 折线图and柱状图
  • 原文地址:https://www.cnblogs.com/919czzl/p/4314359.html
Copyright © 2011-2022 走看看