欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

2018阿里前端实习在线编程-实现一个css选择器总结

程序员文章站 2022-05-01 17:06:13
...

题目:实现一个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、判断是否存在 localName(如果选定的节点不是元素或属性,则该属性返回 NULL。)
3、如果存在 localName,则对其 className、id、localName进行保存处理。
代码:

var genCssSelector = function(){
    // your code here
    var path = [];
    var current = arguments[0];
    while(current.localName){
        if(current.id){
            path.push("#"+current.id);
        }
        if(current.className){
            var tmp = current.className.split(" ");
            var str = "";
            for(var i in tmp){
                str += "."+tmp[i];
            }
            path.push(str);
        }
        if(!current.id && !current.className){
            path.push(current.localName)
        }
        current = current.parentNode;
    }
    path.reverse();
    return path.toString().replace(/\,/g," ");
}