Javascript-DOM操作





  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>dom-操作</title>
  6 </head>
  7 <style>
  8     body,ul,dl,dt,dd{
  9         padding: 0;margin: 0;list-style: none;
 10     }
 11     #wrap{
 12         width: 900px;
 13         height: 400px;
 14         background: linear-gradient(to right bottom,#21ffff,#ce6584);
 15         position: absolute;
 16         left: 0;
 17         top: 0;
 18         bottom: 0;
 19         right: 0;
 20         margin: auto;
 21         box-sizing: border-box;
 22         padding: 80px 0;
 23     }
 24     #content{
 25         width: 700px;
 26         height: 240px;
 27         background: rgba(255,255,255,0.5);
 28         margin: 0 auto;
 29     }
 30     #top-wrap{
 31         height: 50px;
 32         background: rgba(255,255,255,0.2);
 33     }
 34     .fl{
 35         float: left;
 36     }
 37     .fr{
 38         float: right;
 39     }
 40     .clearfix::after{
 41         content: "";
 42         display: block;
 43         height: 0;
 44         clear: both;
 45     }
 46     .top-l,.top-r{
 47         float: left;
 48         height: 100%;
 49         font-size: 14px;
 50     }
 51     .top-l{
 52         width: 100px;
 53         line-height: 50px;
 54         text-align: center;
 55     }
 56     .top-r{
 57         width: calc(100% - 100px);
 58         padding: 11px 0;
 59         box-sizing: border-box;
 60     }
 61     .top-r li{
 62         border: 2px solid #10aaff;
 63         height: 24px;
 64         line-height: 24px;
 65         float: left;
 66         padding: 0 5px;
 67         margin-right: 5px;
 68         display: none;
 69     }
 70     .details{
 71         padding: 0 5px;
 72         color: #10aaff;
 73     }
 74     .close{
 75         padding: 0 5px;
 76         color: #fff;
 77         background: #10aaff;
 78         cursor: pointer;
 79     }
 80     dl{
 81         height: 40px;
 82         line-height: 40px;
 83         font-size: 14px;
 84     }
 85     dt{
 86         padding-right:20px;
 87         color: #848a8c;
 88     }
 89     dl dd{
 90         float: left;
 91         margin-right: 20px;
 92         color: #181818;
 93         cursor: pointer;
 94     }
 95     #inof-wrap{
 96         padding: 15px 20px;
 97         box-sizing: border-box;
 98         background: rgba(255,255,255,0.6);
 99     }
100     #inof-wrap dl:first-child{
101         border-bottom: 1px dashed #5acbd6;
102     }
103     #inof-wrap dl:nth-child(3){
104         border-bottom: 1px dashed #5acbd6;
105         border-top: 1px dashed #5acbd6;
106     }
107     .active{
108         color: #10aaff;
109     }
110 </style>
111 <body>
112     <div id="wrap">
113         <div id="content">
114             <div id="top-wrap">
115                 <div class="top-l">你的选择:</div>
116                 <ul class="top-r">
117                     <li><span class="details">苹果</span><span class="close">×</span></li>
118                     <li><span class="details">3.0英寸以下</span><span class="close">×</span></li>
119                     <li><span class="details">安卓(Android)</span><span class="close">×</span></li>
120                     <li><span class="details">联通3G</span><span class="close">×</span></li>
121                 </ul>
122             </div>
123             <div id="inof-wrap">
124                 <dl>
125                     <dt class="fl">品牌:</dt>
126                     <dd>苹果</dd>
127                     <dd>小米</dd>
128                     <dd>锤子</dd>
129                     <dd>魅族</dd>
130                     <dd>华为</dd>
131                     <dd>OPPO</dd>
132                     <dd>vivo</dd>
133                     <dd>乐视</dd>
134                     <dd>360</dd>
135                     <dd>中兴</dd>
136                     <dd>索尼</dd>
137                 </dl>
138                 <dl>
139                     <dt class="fl">尺寸:</dt>
140                     <dd>3.0英寸以下</dd>
141                     <dd>3.0-3.9英寸</dd>
142                     <dd>4.0-4.5英寸</dd>
143                     <dd>4.6-4.9英寸</dd>
144                     <dd>5.0-5.5英寸</dd>
145                     <dd>6.0英寸以上</dd>
146                 </dl>
147                 <dl>
148                     <dt class="fl">系统:</dt>
149                     <dd>安卓(Android)</dd>
150                     <dd>苹果(IOS)</dd>
151                     <dd>微软(WindowsPhone)</dd>
152                     <dd>无</dd>
153                     <dd>其他</dd>
154                 </dl>
155                 <dl>
156                     <dt class="fl">网络:</dt>
157                     <dd>联通3G</dd>
158                     <dd>双卡单4G</dd>
159                     <dd>双卡双4G</dd>
160                     <dd>联通4G</dd>
161                     <dd>电信4G</dd>
162                     <dd>移动4G</dd>
163                 </dl>
164             </div>
165         </div>
166     </div>
167 </body>
168 <script>
169     "use strict";
170     let aLi=document.querySelectorAll('.top-r li');
171     let aClose=document.querySelectorAll('.top-r .close');
172     let aDl=document.querySelectorAll('#inof-wrap dl');
173     let aDd=document.querySelectorAll('#inof-wrap dl dd');
174     for(let i=0;i<aDd.length;i++){
175         aDd[i].onclick=function(){
176             //父元素 dl的index索引值
177             let parent_index=this.parentNode.index;
178             //点击的dd里的内容
179             let dd_content=this.innerText;
180             //如果点击的dd没有active的类并且active类没有在当前dl里的dd的dom身上
181             if(this.getAttribute("class")!=="active" && !this.parentNode.querySelector('.active')){
182                 //点击的dd就给加个active类
183                 this.className="active";
184             }else{//如果已经存在类了，点击的dd添加上active类，当前dl里的dd已经存在的去掉active类
185                 this.parentNode.querySelector('.active').className="";
186                 this.className="active";
187             }
188             //对应索引值的li的内容和显示隐藏控制
189             aLi[parent_index].style.display="block";
190             aLi[parent_index].querySelector('.details').innerHTML=dd_content; 
191         }
192     }
193     for(let i=0;i<aClose.length;i++){
194         //给关闭按钮和dl添加自定义索引值
195         aClose[i].index=i;
196         aDl[i].index=i;
197         //关闭按钮注册点击事件
198         aClose[i].onclick=function(){
199             this.parentNode.querySelector('.details').innerHTML='';
200             this.parentNode.style.display='none';
201             aDl[this.index].querySelector('.active').className="";
202         }
203     }
204 </script>
205 </html>






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




  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>dom-操作-2</title>
  6 </head>
  7 <style>
  8     body,ul,dl,dt,dd{
  9         padding: 0;margin: 0;list-style: none;
 10     }
 11     #wrap{
 12         width: 900px;
 13         height: 400px;
 14         background: linear-gradient(to right bottom,#21ffff,#ce6584);
 15         position: absolute;
 16         left: 0;
 17         top: 0;
 18         bottom: 0;
 19         right: 0;
 20         margin: auto;
 21         box-sizing: border-box;
 22         padding: 80px 0;
 23     }
 24     #content{
 25         width: 700px;
 26         height: 240px;
 27         background: rgba(255,255,255,0.5);
 28         margin: 0 auto;
 29     }
 30     #top-wrap{
 31         height: 50px;
 32         background: rgba(255,255,255,0.2);
 33     }
 34     .fl{
 35         float: left;
 36     }
 37     .fr{
 38         float: right;
 39     }
 40     .clearfix::after{
 41         content: "";
 42         display: block;
 43         height: 0;
 44         clear: both;
 45     }
 46     .top-l,.top-r{
 47         float: left;
 48         height: 100%;
 49         font-size: 14px;
 50     }
 51     .top-l{
 52         width: 100px;
 53         line-height: 50px;
 54         text-align: center;
 55     }
 56     .top-r{
 57         width: calc(100% - 100px);
 58         padding: 11px 0;
 59         box-sizing: border-box;
 60     }
 61     .top-r li{
 62         border: 2px solid #10aaff;
 63         height: 24px;
 64         line-height: 24px;
 65         float: left;
 66         padding: 0 5px;
 67         margin-right: 5px;
 68         display: none;
 69     }
 70     .details{
 71         padding: 0 5px;
 72         color: #10aaff;
 73     }
 74     .close{
 75         padding: 0 5px;
 76         color: #fff;
 77         background: #10aaff;
 78         cursor: pointer;
 79     }
 80     dl{
 81         height: 40px;
 82         line-height: 40px;
 83         font-size: 14px;
 84     }
 85     dt{
 86         padding-right:20px;
 87         color: #848a8c;
 88     }
 89     dl dd{
 90         float: left;
 91         margin-right: 20px;
 92         color: #181818;
 93         cursor: pointer;
 94     }
 95     #inof-wrap{
 96         padding: 15px 20px;
 97         box-sizing: border-box;
 98         background: rgba(255,255,255,0.6);
 99     }
100     #inof-wrap dl:first-child{
101         border-bottom: 1px dashed #5acbd6;
102     }
103     #inof-wrap dl:nth-child(3){
104         border-bottom: 1px dashed #5acbd6;
105         border-top: 1px dashed #5acbd6;
106     }
107     .active{
108         color: #10aaff;
109     }
110 </style>
111 <body>
112     <div id="wrap">
113         <div id="content">
114             <div id="top-wrap">
115                 <div class="top-l">你的选择:</div>
116                 <ul class="top-r">
117                     <li><span class="details">苹果</span><span class="close">×</span></li>
118                     <li><span class="details">3.0英寸以下</span><span class="close">×</span></li>
119                     <li><span class="details">安卓(Android)</span><span class="close">×</span></li>
120                     <li><span class="details">联通3G</span><span class="close">×</span></li>
121                 </ul>
122             </div>
123             <div id="inof-wrap">
124                 <dl>
125                     <dt class="fl">品牌:</dt>
126                     <dd>苹果</dd>
127                     <dd>小米</dd>
128                     <dd>锤子</dd>
129                     <dd>魅族</dd>
130                     <dd>华为</dd>
131                     <dd>OPPO</dd>
132                     <dd>vivo</dd>
133                     <dd>乐视</dd>
134                     <dd>360</dd>
135                     <dd>中兴</dd>
136                     <dd>索尼</dd>
137                 </dl>
138                 <dl>
139                     <dt class="fl">尺寸:</dt>
140                     <dd>3.0英寸以下</dd>
141                     <dd>3.0-3.9英寸</dd>
142                     <dd>4.0-4.5英寸</dd>
143                     <dd>4.6-4.9英寸</dd>
144                     <dd>5.0-5.5英寸</dd>
145                     <dd>6.0英寸以上</dd>
146                 </dl>
147                 <dl>
148                     <dt class="fl">系统:</dt>
149                     <dd>安卓(Android)</dd>
150                     <dd>苹果(IOS)</dd>
151                     <dd>微软(WindowsPhone)</dd>
152                     <dd>无</dd>
153                     <dd>其他</dd>
154                 </dl>
155                 <dl>
156                     <dt class="fl">网络:</dt>
157                     <dd>联通3G</dd>
158                     <dd>双卡单4G</dd>
159                     <dd>双卡双4G</dd>
160                     <dd>联通4G</dd>
161                     <dd>电信4G</dd>
162                     <dd>移动4G</dd>
163                 </dl>
164             </div>
165         </div>
166     </div>
167 </body>
168 <script>
169     "use strict";
170     let oWrap=document.querySelector('#inof-wrap');
171     let oUl=document.querySelector('.top-r');
172     let aLi=document.querySelectorAll('.top-r li');
173     let aClose=document.querySelectorAll('.top-r .close');
174     let aDl=document.querySelectorAll('#inof-wrap dl');
175     let aDd=document.querySelectorAll('#inof-wrap dl dd');
176     oWrap.addEventListener('click',function(ev){
177         //事件对象兼容写法
178         let e=ev||window.event;
179 
180         //点击的目标元素
181         let _clickEle=e.target;
182 
183         //点击的元素是dd
184         if( _clickEle.tagName === 'DD' ){
185 
186             //点击的对应的父元素dl的索引值
187             let _index=_clickEle.parentNode.index;
188
192             //对应索引值的dl下面的dd没有active类
193             if(!aDl[_index].querySelector('.active')){
194 
195                 //点击的dd加上active类
196                 _clickEle.className='active';
197 
198             }else{//如果已经存在active类 先移除 再给点击的dd添加active类
199 
200                 //先移除active类
201                 aDl[_index].querySelector('.active').className='';
202 
203                 //点击的dd再加上active类
204                 _clickEle.className='active';
205             }
206             
207             //选择对应的li显示和内容对应改变
208             aLi[_index].style.display='block';
209             aLi[_index].querySelector('.details').innerHTML=_clickEle.innerHTML;    
210         }
211     },false);
212 
213 
214     //关闭按钮操作
215     oUl.addEventListener('click',function(ev){
216         //事件对象兼容写法
217         let e=ev||window.event;
218         //点击的元素是关闭按钮
219         if( e.target.className === 'close' ){
220             //li的索引值
221             let _index=e.target.parentNode.index;
222             //点击关闭按钮对应索引值的li隐藏
223             aLi[_index].style.display='none';
224             //点击关闭按钮对应索引值下面的dl下面的有active类的自己移除掉active
225             aDl[_index].querySelector('.active').className='';   
226         }
227     },false);
228 
229     //自定义索引值属性
230     for(let i=0; i<aLi.length; i++){
231         aLi[i].index=i;
232         aDl[i].index=i;
233     }
234 </script>
235 </html>





 






        

	      

	    

	  

	  

	    
      
        【推广】
        免费学中医，健康全家人
      
	  

    

    

          原文地址：https://www.cnblogs.com/studyshufei/p/8679100.html