题目：实现一个getCssSelector方法，可以根据给定的元素生成一个css选择器，通过这个选择器可以快速定位到这个元素（document.querySelector(A)）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="page">
<div class="content main">
<div class="refer">
<ul>
<li></li>
<li></li>
...
</ul>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
//根据上述HTML结构，完善如下JavaScript代码中的“your code here”部分，使得click事件中的注释要求符合预期：
var genCssSelector = function(){
// your code here
}
document.addEventListener('click', function(e){
//点击li时，返回：html body #page .content.main .refer ul li
console.log(genCssSelector(e.target));
})
</script>
扩展：
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。
分析：
刚开始没读懂题，看了下面的注释才知道要输出什么，考察DOM是树形关系，如何获取父元素是本题的关键。
我的代码：
1 var genCssSelector = function(){ 2 var element=arguments[0];//函数传入的第一个参数，即点击元素 3 var parentElement=element.parentNode;//点击元素的父元素 4 var strGenCssSelector=element.tagName.toLowerCase()//获取点击的元素的标签名 5 while(parentElement.nodeName.toLowerCase()!=='#document'){ 6 if(parentElement.id!==''){//父元素有id 7 strGenCssSelector='#'+parentElement.id+' '+strGenCssSelector; 8 parentElement=parentElement.parentNode; 9 continue; 10 }else if(parentElement.className!=''){//父元素有class 11 strGenCssSelector=' '+strGenCssSelector; 12 var classList=parentElement.className.split(' ');//按照空格分隔className，存入classList数组里 13 for(var i=classList.length-1;i>=0;i--){//逆序输出 14 strGenCssSelector='.'+classList[i]+strGenCssSelector; 15 } 16 parentElement=parentElement.parentNode; 17 continue; 18 }else{ 19 strGenCssSelector=parentElement.nodeName.toLowerCase()+' '+strGenCssSelector; 20 parentElement=parentElement.parentNode; 21 continue; 22 } 23 } 24 return strGenCssSelector; 25 }
