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

最新推荐文章于 2022-12-09 23:51:39 发布

赏花赏景赏时光

最新推荐文章于 2022-12-09 23:51:39 发布

阅读量1.2k

点赞数

分类专栏： js编程文章标签：实习在线编程-实现一个css选择器总结

本文链接：https://blog.csdn.net/tangxiujiang/article/details/79658513

版权

js编程专栏收录该内容

3 篇文章 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>

赏花赏景赏时光

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
编程实现一个css选择器总结

题目：实现一个getCssSelector方法，可以根据给定的元素生成一个css选择器，通过这个选择器可以快速定位到这个元素（document.querySelector(A)）。&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;..
复制链接

扫一扫