【JavaScript】前端练习题（2）

最新推荐文章于 2025-03-14 08:42:12 发布

Bannings_

最新推荐文章于 2025-03-14 08:42:12 发布

阅读量547

点赞数

文章标签： JavaScript

本文介绍了一种用于生成CSS选择器的JavaScript函数，通过遍历DOM元素来创建精确的选择器路径，适用于网页开发中定位特定元素的需求。文章提供了两种实现方案，一种是大佬级的精炼写法，另一种是更为易懂的自写版本。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">

<head>
    ...
</head>

<body>
    <div id="page">
        <div class="content main">
            <div class="refer">
                <ul>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
    </div>
</body>

<script>
    var genCssSelector = function () {
        // 完成这儿的代码
    }

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

</html>

大佬写的答案：

var genCssSelector = function () {
        let selectorArr = [];

        function nodeSelector(el) {
            let id = '';
            let className = '';
            let tagName = '';

            if (el.id)
                id = el.id.split(' ').map(item => '#' + item).join('');
            if (el.className)
                className = el.className.split(' ').map(item => '.' + item).join('');
            tagName = el.nodeName.toLowerCase();

            selectorArr.unshift(tagName + id + className);

            if (el.parentNode !== document)
                nodeSelector(el.parentNode);
        }

        let el = arguments[0];
        nodeSelector(el);

        return selectorArr.join(' ');
    }

自己写的答案：

var genCssSelector = function() {        
            let et = arguments[0];
            let selectArray = [];
            let resultArray = [];
            function nodeSelector(et) {
                if(et.id != '' ) {
                    selectArray.push('#'+et.id);
                } else if(et.className != '') {
                    selectArray.push('.'+et.className.replace(' ','.'));
                } else {
                    selectArray.push(et.nodeName.toLowerCase());
                }
                if(et.parentNode.id != undefined){
                    nodeSelector(et.parentNode);
                }
            }
            nodeSelector(et);
            let length = selectArray.length;
            for(let i = 0; i < length;i++)
            {
                resultArray.push(selectArray.pop());
            }
            return resultArray.join(' ');
        }