您的位置：首页 > Web前端 > CSS

编程实现一个css选择器总结

2018-03-22 19:27 429 查看

题目：实现一个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>思路：
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>
<div id="page">
<div class="content main">
<div class="refer">
<ul>
<li></li>
<li></li>
...
</ul>
</div>
</div>
</div>
<script type="text/javascript">

var genCssSelector = function(){
var obj = arguments[0]; //被点击的对象
var parentObj = obj.parentNode; //被点击对象的父对象节点
var nodeTagName = obj.nodeName.toLowerCase(); //将各个节点名放在这里面，最后面作为函数返回值
// 循环，直到文档根节点document结束循环,文档节
4000
点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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航