核心提示：题目：实现一个getCssSelector方法，可以根据给定的元素生成一个css选择器，通过这个选择器可以快速定位到这个元素（document.querySelector(A)）。!DOCTYPE h...
题目：实现一个getCssSelector方法，可以根据给定的元素生成一个css选择器，通过这个选择器可以快速定位到这个元素（document.querySelector(A)）。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p id="page">
<p class="content main">
<p class="refer">
<ul>
<li></li>
<li></li>
...
</ul>
</p>
</p>
</p>
</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>
思路：
1、利用parentNode实现遍历每个元素的父节点
2、用一个变量保存遍历到的父节点的id名或者className或者nodeName
3、循环结束条件，遍历到页面的根节点文档节点document，文档节点document的nodeName属性值为'#document'
4、注意，基本上元素的nodeName属性返回值都是大写的，所以要用函数toLowerCase()转换成小写
完整代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p id="page">
<p class="content main">
<p class="refer">
<ul>
<li></li>
<li></li>
...
</ul>
</p>
</p>
</p>
<script type="text/javascript">
var genCssSelector = function(){
var obj = arguments[0]; //被点击的对象
var parentObj = obj.parentNode; //被点击对象的父对象节点
var nodeTagName = obj.nodeName.toLowerCase(); //将各个节点名放在这里面，最后面作为函数返回值
// 循环，直到文档根节点document结束循环,文档节点docuemnt的nodeName值为'#document'
while( parentObj.nodeName.toLowerCase() != '#document' ){
if( parentObj.id != '' ){//注意nodeName属性返回节点的名字基本上是大写，所以用toLowerCase()函数转换为全部都是小写的名称
// 父节点有id属性
nodeTagName = '#' + parentObj.id + ' ' + nodeTagName;
parentObj = parentObj.parentNode;
}else if( parentObj.className !='' ){
// 有属性类,可能有多个
nodeTagName = ' ' + nodeTagName;
var list = parentObj.className.split(' ');
for(var i=list.length-1;i>=0;i--){
nodeTagName = '.' + list[i] + nodeTagName;
}
parentObj = parentObj.parentNode;
}else{
// 没有id class属性的标签
nodeTagName = parentObj.nodeName.toLowerCase() + ' ' + nodeTagName;
parentObj = parentObj.parentNode;
}
}
return nodeTagName;
}
document.addEventListener('click', function(e){
//点击li时，返回：html body #page .content.main .refer ul li
console.log(genCssSelector(e.target));
});
</script>
</body>
</html>
