阿里内推在线编程题（返回元素的选择器）
最近，有朋友给了个阿里内推的邮箱，于是去投了一下，然后中午睡意正浓的时候点开了在线编程（精神状态不好的时候就不应该这么干），而且一开始就审错了题。
题目大意是这样的：点击网页上的元素，返回这个元素的选择器（就是能用document.querySelector()选出来的）。
于是一开始就想要把父母元素都拿出来，并且从外往内选择的话，应该是事件捕获，想了7-8分钟往下一看，原来已经写好点击事件监听器了，这样肯定不是捕获了。
思路
- 这时候思路就要从点击事件开始，获取点击事件源，得到target，从target里找parentNode，然后再重复找parentNode，直到没有。
- 然后就是用数组储存这些parentNode的id、className、nodeName，并且考虑要的格式是
#，.和小写。 - 数组储存了一个还要把它们逆序，然后输出为字符串。
代码
var genCssSelector = function(target){
var str = ''; //最后要返回的字符串
var arr = []; //储存选择器的数组
var target = target; //被点击的目标
var sel = ''; //每个元素选择器
var nodeName = target.nodeName; //标签
var id = target.id; //id
var className = target.className; //class名
//有父母节点的时候执行
while(target.parentNode) {
nodeName = target.nodeName;
id = target.id;
className = target.className;
if (id) {
sel = '#'+id;
}else if (className) {
sel = '.'+className;
}else {
sel = nodeName.toLowerCase();
}
arr.push(sel);
target = target.parentNode;
}
if (!target.parentNode) {
//数组逆序
arr.reverse();
//每个选择器之间留空
str = arr.join(' ');
// console.log(arr.join(' '));
}
return str;
}
document.addEventListener('click', function(e){
console.log(genCssSelector(e.target));
})
版权声明：本文为dkplus原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。