2018阿里前端在线编程测试

最新推荐文章于 2024-07-31 21:07:05 发布

欲语含羞

最新推荐文章于 2024-07-31 21:07:05 发布

阅读量1.5k

点赞数

分类专栏：前端笔试文章标签： html 笔试

我的版权就是没有版权，能帮助到你就很开心啦~^_^

本文链接：https://blog.csdn.net/lanyao961220/article/details/79939774

版权

前端笔试专栏收录该内容

2 篇文章 0 订阅

订阅专栏

题目就是点击网页上的元素，获取它的CSS选择器

半个小时......一首凉凉送给自己:-）

<!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>
	<script>
		var genCssSelector = function(e){
			var str="";
			var tar=e;
			str=tar.nodeName.toLowerCase()+" "+tar.className;
			tar=tar.parentNode;
			while(tar.nodeName.toLowerCase()!="html"){
			
				if(tar.id!==""){
					str="#"+tar.id+" "+str;
					tar=tar.parentNode;
					continue;
				}
				if(tar.className!==""){
					var names=tar.className.split(" ");
					var temp="";
					for(i=0;i<names.length;i++){
						temp=temp+"."+names[i];	
					}
					str=temp+" "+str;
					tar=tar.parentNode;
					continue;
				}
				str=tar.nodeName.toLowerCase()+" "+str;
				
				tar=tar.parentNode;
			}
			str=tar.nodeName.toLowerCase()+" "+str;
		    return str;
		
		}

 

		document.addEventListener('click', function(e){
		
		    //点击li时，返回：html body #page .content.main .refer ul li
		    console.log(genCssSelector(e.target));
		
		});
	</script>
</body>

</html>