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

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

程序员文章站 2022-03-02 18:36:49
...

题目：实现一个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结束循环,文档节点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>



相关标签： 实习在线编程-实现一个css选择器总结

上一篇： css样式选择器

下一篇： CSS样式选择器

推荐阅读