编程题（一）

代码要求：点击li时，返回：html body #page .content.main .refer ul li

思路：

很显然我们需要遍历该节点的所有父节点直到父节点为document，因此我们考虑使用while循环，具体步骤：

1. 声明最后返回的字符串str
2. 遍历所有的父节点
3. 如果父节点有id，获取id并用#连接，再追加到字符串str上
4. 如果父节点有class，获取所有的class（可能有多个class），将所有的class用.连接之后再追加到str
5. 如果父节点没有id和class直接获取tagName，再追加到str后面
6. 将str变为小写，反转并去掉两边的空格
7. 如果最后一个节点为document，终止循环，返回str。 具体代码如下：

var genCssSelector = function(element){
  // your code here  功能实现
  var flag = 1
  // 第一步
  var str = ''
  // 第二部
  while (flag) {
    // 第三四五步
    if (element.className) {
      var allClass = []
      var Temselect = ''
      allClass =  element.className.split(' ')
      console.log(allClass)
      for (var i = 0; i < allClass.length; i ++) {
        Temselect = Temselect + '.' + allClass[i]
      }
      select = Temselect
    }else if (element.id) {
      select = '#' + element.id
    } else {
      select = element.tagName
    }
    // 第六步
    str = ((str + ',' + select ).toLowerCase()).split(',').reverse().join(' ').trim()
    // 第七步
    element = element.parentNode
    if (element == document) {
      flag = 0
      return str
    }
  }
}
document.addEventListener('click', function(e){
//代码要求：点击li时，返回：html body #page .content.main .refer ul li
console.log(genCssSelector(e.target));
})
复制代码