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

蔚落 2022-05-28 20:14 53阅读 0赞

题目：实现一个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>