一道名为"敲门砖"的面试题:
用面向对象的方法写,点击列表内,子元素的子标签, 来删除子元素
敲门砖
考点:
- 递归(删除标签, 需要找到列表的直属子标签, 需要通过递归层层往上找,
parentNode)- 冒泡(只需为顶级父元素addEventListener绑定事件, 并通过e.target区分子标签, 即可实现一次绑定, 多次使用)
- ES6语法(使用ES6的class 构造方法需要指明constructor函数)
- 布局(使用网格布局,快速实现内联元素的两端对齐, justify-content: span-between)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>阿里敲门砖</title><style>li{list-style: none;display: flex;justify-content: space-between;align-items: center;background-color: #fdf6e3;border: 1px solid #0c8ac5;height: 100px;padding: 5px;}.del{border:1px solid #323232;color: #c03035;}</style>
</head>
<body><ol class="list"><li><span class="desc">黄河之水</span><span class="del">X</span></li><li><span class="desc">天上来</span><span class="del">X</span></li><li><span class="desc">奔流</span><span class="del">X</span></li><li><span class="desc">到海</span><span class="del">X</span></li><li><span class="desc">不复回</span><span class="del">X</span></li><li><span class="desc">君不见</span><span class="del">X</span></li><li><span class="desc">高唐明镜</span><span class="del">X</span></li><li><span class="desc">悲白发</span><span class="del">X</span></li></ol><ol class="list"><li><span class="desc">到海</span><span class="del">X</span></li><li><span class="desc">不复回</span><span class="del">X</span></li><li><span class="desc">天上来</span><span class="del">X</span></li><li><span class="desc">奔流</span><span class="del">X</span></li><li><span class="desc">君不见</span><span class="del">X</span></li><li><span class="desc">黄河之水</span><span class="del">X</span></li><li><span class="desc">高唐明镜</span><span class="del">X</span></li><li><span class="desc">悲白发</span><span class="del">X</span></li></ol><script>class List{constructor(els){// 将this转换为局部变量self, 个人爱好Python3,这个写法类似Python3let self = this;// 根据类选择器,选择所有符合条件的的清单, 并生成列表let el = Array.from(document.querySelectorAll(els))// 为每个清单绑定事件el.forEach(item => item.addEventListener('click', function(e){// 如果点击的元素的类名带有del, 则可以删除这条标签if (e.target.className.indexOf('del') > -1){// 移除相应的子元素self.removeDom.call(self, item, e.target)}}))}removeDom(item, tg){let self = this;// 设置移除判定函数let judgeRemoveDom = function(item, tg){// 获取触发事件元素的父级元素let parentNode = tg.parentNode;// 如果当前找到的元素的父元素恰好为item, 则可以直接移除if (item === parentNode){item.removeChild(tg);}// 如果当前的父元素不是item, 则继续往上找else{tg = parentNode;judgeRemoveDom(item, tg);}}judgeRemoveDom(item, tg);}}window.addEventListener('DOMContentLoaded', function(){new List('.list')})</script></body>
</html>
