一道名為"敲門磚"的面試題:
用面向對象的方法寫,點擊列表內,子元素的子標簽, 來刪除子元素
敲門磚
考點:
- 遞歸(刪除標簽, 需要找到列表的直屬子標簽, 需要通過遞歸層層往上找,
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>
