关注前端 | 前端博客
当前位置: JavaScript > JS-DOM操作案例

JS-DOM操作案例

2018-04-20 分类:JavaScript 作者:管理员 阅读(692)

记录一次在妙味群里的作业,自己按要求做完后,老师很满意,但是老师提了个建议,DOM节点如果很多的时候,再去临时获取节点操作,对性能就不好了,不废话,两种解决方法,最终要告诉大家的一个道理:根据实际项目来选定那种方法来实现业务就行。

方法1:遍历节点循环添加事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom-操作</title>
</head>
<style>
    body,ul,dl,dt,dd{
        padding: 0;margin: 0;list-style: none;
    }
    #wrap{
       width: 900px;
        height: 400px;
        background: linear-gradient(to right bottom,#21ffff,#ce6584);
       position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        box-sizing: border-box;
        padding: 80px 0;
    }
    #content{
       width: 700px;
        height: 240px;
        background: rgba(255,255,255,0.5);
        margin: 0 auto;
    }
    #top-wrap{
       height: 50px;
        background: rgba(255,255,255,0.2);
    }
    .fl{
        float: left;
    }
    .fr{
        float: right;
    }
    .clearfix::after{
        content: "";
        display: block;
        height: 0;
        clear: both;
    }
    .top-l,.top-r{
        float: left;
        height: 100%;
        font-size: 14px;
    }
    .top-l{
        width: 100px;
        line-height: 50px;
        text-align: center;
    }
    .top-r{
        width: calc(100% - 100px);
        padding: 11px 0;
        box-sizing: border-box;
    }
    .top-r li{
        border: 2px solid #10aaff;
       height: 24px;
        line-height: 24px;
        float: left;
        padding: 0 5px;
        margin-right: 5px;
        display: none;
    }
    .details{
        padding: 0 5px;
        color: #10aaff;
   }
    .close{
        padding: 0 5px;
        color: #fff;
       background: #10aaff;
       cursor: pointer;
    }
    dl{
        height: 40px;
        line-height: 40px;
        font-size: 14px;
    }
    dt{
        padding-right:20px;
        color: #848a8c;
   }
    dl dd{
        float: left;
        margin-right: 20px;
        color: #181818;
       cursor: pointer;
    }
    #inof-wrap{
       padding: 15px 20px;
        box-sizing: border-box;
        background: rgba(255,255,255,0.6);
    }
    #inof-wrap dl:first-child{
       border-bottom: 1px dashed #5acbd6;
   }
    #inof-wrap dl:nth-child(3){
       border-bottom: 1px dashed #5acbd6;
       border-top: 1px dashed #5acbd6;
   }
    .active{
        color: #10aaff;
   }
</style>
<body>
    <div id="wrap">
        <div id="content">
            <div id="top-wrap">
                <div class="top-l">你的选择:</div>
                <ul class="top-r">
                    <li><span class="details">苹果</span><span class="close">×</span></li>
                    <li><span class="details">3.0英寸以下</span><span class="close">×</span></li>
                    <li><span class="details">安卓(Android)</span><span class="close">×</span></li>
                    <li><span class="details">联通3G</span><span class="close">×</span></li>
                </ul>
            </div>
            <div id="inof-wrap">
                <dl>
                    <dt class="fl">品牌:</dt>
                    <dd>苹果</dd>
                    <dd>小米</dd>
                    <dd>锤子</dd>
                    <dd>魅族</dd>
                    <dd>华为</dd>
                    <dd>OPPO</dd>
                    <dd>vivo</dd>
                    <dd>乐视</dd>
                    <dd>360</dd>
                    <dd>中兴</dd>
                    <dd>索尼</dd>
                </dl>
                <dl>
                    <dt class="fl">尺寸:</dt>
                    <dd>3.0英寸以下</dd>
                    <dd>3.0-3.9英寸</dd>
                    <dd>4.0-4.5英寸</dd>
                    <dd>4.6-4.9英寸</dd>
                    <dd>5.0-5.5英寸</dd>
                    <dd>6.0英寸以上</dd>
                </dl>
                <dl>
                    <dt class="fl">系统:</dt>
                    <dd>安卓(Android)</dd>
                    <dd>苹果(IOS)</dd>
                    <dd>微软(WindowsPhone)</dd>
                    <dd></dd>
                    <dd>其他</dd>
                </dl>
                <dl>
                    <dt class="fl">网络:</dt>
                    <dd>联通3G</dd>
                    <dd>双卡单4G</dd>
                    <dd>双卡双4G</dd>
                    <dd>联通4G</dd>
                    <dd>电信4G</dd>
                    <dd>移动4G</dd>
                </dl>
            </div>
        </div>
    </div>
</body>
<script>
    "use strict";
    let aLi=document.querySelectorAll('.top-r li');
    let aClose=document.querySelectorAll('.top-r .close');
    let aDl=document.querySelectorAll('#inof-wrap dl');
    let aDd=document.querySelectorAll('#inof-wrap dl dd');
    for(let i=0;i<aDd.length;i++){
        aDd[i].onclick=function(){
            //父元素 dl的index索引值
            let parent_index=this.parentNode.index;
            //点击的dd里的内容
            let dd_content=this.innerText;
            //如果点击的dd没有active的类并且active类没有在当前dl里的dd的dom身上
            if(this.getAttribute("class")!=="active" && !this.parentNode.querySelector('.active')){
                //点击的dd就给加个active类
                this.className="active";
            }else{//如果已经存在类了,点击的dd添加上active类,当前dl里的dd已经存在的去掉active类
                this.parentNode.querySelector('.active').className="";
                this.className="active";
            }
            //对应索引值的li的内容和显示隐藏控制
            aLi[parent_index].style.display="block";
            aLi[parent_index].querySelector('.details').innerHTML=dd_content;
        }
    }
    for(let i=0;i<aClose.length;i++){
        //给关闭按钮和dl添加自定义索引值
        aClose[i].index=i;
        aDl[i].index=i;
        //关闭按钮注册点击事件
        aClose[i].onclick=function(){
            this.parentNode.querySelector('.details').innerHTML='';
            this.parentNode.style.display='none';
            aDl[this.index].querySelector('.active').className="";
        }
    }
</script>
</html>

考虑性能的话,这个方法的缺点是:在点击事件中临时获取dom元素对性能不太友好,所以我又用事件委托写了第二种方法。如下

事件委托

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom-操作-2</title>
</head>
<style>
    body,ul,dl,dt,dd{
        padding: 0;margin: 0;list-style: none;
    }
    #wrap{
       width: 900px;
        height: 400px;
        background: linear-gradient(to right bottom,#21ffff,#ce6584);
       position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        box-sizing: border-box;
        padding: 80px 0;
    }
    #content{
       width: 700px;
        height: 240px;
        background: rgba(255,255,255,0.5);
        margin: 0 auto;
    }
    #top-wrap{
       height: 50px;
        background: rgba(255,255,255,0.2);
    }
    .fl{
        float: left;
    }
    .fr{
        float: right;
    }
    .clearfix::after{
        content: "";
        display: block;
        height: 0;
        clear: both;
    }
    .top-l,.top-r{
        float: left;
        height: 100%;
        font-size: 14px;
    }
    .top-l{
        width: 100px;
        line-height: 50px;
        text-align: center;
    }
    .top-r{
        width: calc(100% - 100px);
        padding: 11px 0;
        box-sizing: border-box;
    }
    .top-r li{
        border: 2px solid #10aaff;
       height: 24px;
        line-height: 24px;
        float: left;
        padding: 0 5px;
        margin-right: 5px;
        display: none;
    }
    .details{
        padding: 0 5px;
        color: #10aaff;
   }
    .close{
        padding: 0 5px;
        color: #fff;
       background: #10aaff;
       cursor: pointer;
    }
    dl{
        height: 40px;
        line-height: 40px;
        font-size: 14px;
    }
    dt{
        padding-right:20px;
        color: #848a8c;
   }
    dl dd{
        float: left;
        margin-right: 20px;
        color: #181818;
       cursor: pointer;
    }
    #inof-wrap{
       padding: 15px 20px;
        box-sizing: border-box;
        background: rgba(255,255,255,0.6);
    }
    #inof-wrap dl:first-child{
       border-bottom: 1px dashed #5acbd6;
   }
    #inof-wrap dl:nth-child(3){
       border-bottom: 1px dashed #5acbd6;
       border-top: 1px dashed #5acbd6;
   }
    .active{
        color: #10aaff;
   }
</style>
<body>
    <div id="wrap">
        <div id="content">
            <div id="top-wrap">
                <div class="top-l">你的选择:</div>
                <ul class="top-r">
                    <li><span class="details">苹果</span><span class="close">×</span></li>
                    <li><span class="details">3.0英寸以下</span><span class="close">×</span></li>
                    <li><span class="details">安卓(Android)</span><span class="close">×</span></li>
                    <li><span class="details">联通3G</span><span class="close">×</span></li>
                </ul>
            </div>
            <div id="inof-wrap">
                <dl>
                    <dt class="fl">品牌:</dt>
                    <dd>苹果</dd>
                    <dd>小米</dd>
                    <dd>锤子</dd>
                    <dd>魅族</dd>
                    <dd>华为</dd>
                    <dd>OPPO</dd>
                    <dd>vivo</dd>
                    <dd>乐视</dd>
                    <dd>360</dd>
                    <dd>中兴</dd>
                    <dd>索尼</dd>
                </dl>
                <dl>
                    <dt class="fl">尺寸:</dt>
                    <dd>3.0英寸以下</dd>
                    <dd>3.0-3.9英寸</dd>
                    <dd>4.0-4.5英寸</dd>
                    <dd>4.6-4.9英寸</dd>
                    <dd>5.0-5.5英寸</dd>
                    <dd>6.0英寸以上</dd>
                </dl>
                <dl>
                    <dt class="fl">系统:</dt>
                    <dd>安卓(Android)</dd>
                    <dd>苹果(IOS)</dd>
                    <dd>微软(WindowsPhone)</dd>
                    <dd></dd>
                    <dd>其他</dd>
                </dl>
                <dl>
                    <dt class="fl">网络:</dt>
                    <dd>联通3G</dd>
                    <dd>双卡单4G</dd>
                    <dd>双卡双4G</dd>
                    <dd>联通4G</dd>
                    <dd>电信4G</dd>
                    <dd>移动4G</dd>
                </dl>
            </div>
        </div>
    </div>
</body>
<script>
    "use strict";
    let oWrap=document.querySelector('#inof-wrap');
    let oUl=document.querySelector('.top-r');
    let aLi=document.querySelectorAll('.top-r li');
    let aClose=document.querySelectorAll('.top-r .close');
    let aDl=document.querySelectorAll('#inof-wrap dl');
    let aDd=document.querySelectorAll('#inof-wrap dl dd');
    oWrap.addEventListener('click',function(ev){
        //事件对象兼容写法
        let e=ev||window.event;

        //点击的目标元素
        let _clickEle=e.target;

        //点击的元素是dd
        if( _clickEle.tagName === 'DD' ){

            //点击的对应的父元素dl的索引值
            let _index=_clickEle.parentNode.index;
            //对应索引值的dl下面的dd没有active类
            if(!aDl[_index].querySelector('.active')){

                //点击的dd加上active类
                _clickEle.className='active';

            }else{//如果已经存在active类 先移除 再给点击的dd添加active类

                //先移除active类
                aDl[_index].querySelector('.active').className='';

                //点击的dd再加上active类
                _clickEle.className='active';
            }
           
            //选择对应的li显示和内容对应改变
            aLi[_index].style.display='block';
            aLi[_index].querySelector('.details').innerHTML=_clickEle.innerHTML;    
        }
    },false);


    //关闭按钮操作
    oUl.addEventListener('click',function(ev){
        //事件对象兼容写法
        let e=ev||window.event;
        //点击的元素是关闭按钮
        if( e.target.className === 'close' ){
            //li的索引值
            let _index=e.target.parentNode.index;
            //点击关闭按钮对应索引值的li隐藏
            aLi[_index].style.display='none';
            //点击关闭按钮对应索引值下面的dl下面的有active类的自己移除掉active
            aDl[_index].querySelector('.active').className='';  
        }
    },false);

    //自定义索引值属性
    for(let i=0; i<aLi.length; i++){
        aLi[i].index=i;
        aDl[i].index=i;
    }
</script>
</html>

「两年博客,如果觉得我的文章对您有用,请帮助本站成长」

赞(3) 打赏

感谢您让我添加个鸡腿!

支付宝
微信
3

感谢您让我添加个鸡腿!

支付宝
微信

上一篇:

下一篇:

共有 0 条评论 - JS-DOM操作案例

博客简介

一个不知名的前端菜鸟,梦想能够飞上青天!
掘金 思否 npm github uniapp插件 工具方法-数组 工具方法-时间日期

精彩评论

服务热线:
 177****6038

 QQ在线交流

 旺旺在线