【JavaScript】前端练习题（2）

<!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(' ');
        }

【JavaScript】前端练习题（2）

猜你喜欢