记录一次在妙味群里的作业,自己按要求做完后,老师很满意,但是老师提了个建议,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
>
「三年博客,如果觉得我的文章对您有用,请帮助本站成长」
共有 0 条评论 - JS-DOM操作案例