1. 程式人生 > >程式設計實現一個css選擇器總結

程式設計實現一個css選擇器總結

題目:實現一個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>