做完就感觉自己就是欠练。。。做题的时候着急。头脑一片白啥也想不起来了。只用了最简单的办法做还出了问题。。比如什么审题啊。又或者连题意我都没读明白就开始做了,题很简单。但是错在我自己。。把这道题粘出来以后做个教训吧。。。
实现一个方法genCssSelector,可以根据一个给定的元素生成一个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>
根据上述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));
})
当时提交的方法我就不粘了。。就是个小白感觉都比我答的好。。粘一个我最后几分钟读明白题才想好的办法代码吧。当然已经来不及了。
var genCssSelector = function(e){ var obj = document.querySelector(e.tagName); var str =[]; var i=0; while(1){ if(obj.parentNode==null||obj.parentNode==''||obj.parentNode==undefined){ break; }else{ if(obj.className){ str[i] = '.'+obj.className.replace(' ','.'); }else{ if(obj.id){ str[i] = '#'+obj.id; }else{ str[i] = obj.tagName; } } i++; obj = obj.parentNode; } } str.reverse(); return str.toString().replace(/,/g,' ').toLowerCase(); } document.addEventListener('click', function(e){ //点击li时,返回:html body #page .content.main .refer ul li console.log(genCssSelector(e.target)); })
基本功还是不行,还是欠缺锻炼,看来还得多打代码了。