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," ");
}