阿里内推在线编程题（返回元素的选择器）

最近，有朋友给了个阿里内推的邮箱，于是去投了一下，然后中午睡意正浓的时候点开了在线编程（精神状态不好的时候就不应该这么干），而且一开始就审错了题。

题目大意是这样的：点击网页上的元素，返回这个元素的选择器（就是能用document.querySelector()选出来的）。

于是一开始就想要把父母元素都拿出来，并且从外往内选择的话，应该是事件捕获，想了7-8分钟往下一看，原来已经写好点击事件监听器了，这样肯定不是捕获了。

思路

1. 这时候思路就要从点击事件开始，获取点击事件源，得到target，从target里找parentNode，然后再重复找parentNode，直到没有。
2. 然后就是用数组储存这些parentNode的id、className、nodeName，并且考虑要的格式是#，.和小写。
3. 数组储存了以后还要把它们逆序，然后输出为字符串。

代码

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));

})