阿里测试——生成一个CSS选择器

最新推荐文章于 2024-05-29 22:48:09 发布

swpu_lwf

最新推荐文章于 2024-05-29 22:48:09 发布

阅读量2.1k

点赞数 2

分类专栏： DOM 文章标签：阿里测试笔试题 DOM js

本文链接：https://blog.csdn.net/liwenfei123/article/details/79523261

版权

DOM 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

题目：
这里写图片描述

我的解法：

<!DOCTYPE html>
<html lang="en">
<head
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="page">
        <div class="content main">
            <div class="refer">
                <ul>
                    <li>click1</li>
                    <li>click2</li>
                    <li>click3</li>
                </ul>
            </div>
        </div>
    </div>
</body>
<script>

    var genCssSelector=function(){
        //you code here
        var ele=arguments[0];
        var parentEle=ele.parentNode;
        var strGenCssSelector=ele.tagName.toLowerCase();
        while(parentEle.nodeName.toLowerCase()!=='#document'){
            if(parentEle.id!==''){
                strGenCssSelector='#'+parentEle.id+' '+strGenCssSelector;
                parentEle=parentEle.parentNode;      
                continue;
            }else if(parentEle.className!=''){
                    strGenCssSelector=' '+strGenCssSelector;
                    var classList=parentEle.classList||parentEle.className.split(' ');
                    for(var i=0;i<classList.length;i++){
                        strGenCssSelector='.'+classList[i]+strGenCssSelector;
                    }
                    parentEle=parentEle.parentNode;      
                    continue;
            }else{
                    strGenCssSelector=parentEle.nodeName.toLowerCase()+' '+strGenCssSelector;
                    parentEle=parentEle.parentNode;   
                    continue;
            } 

        }
        return strGenCssSelector;
    }

    document.addEventListener('click',function(e){
        //点击li时，返回html body #page .content.main .refer ul li
        alert(genCssSelector(e.target));
    })
</script>
</html>

swpu_lwf

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
阿里测试——生成一个CSS选择器

题目：我的解法：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&am
复制链接

扫一扫

专栏目录