2018阿里前端實習在線編程-實現一個css選擇器總結

題目：實現一個getCssSelector方法，能夠根據給定的元素生成一個css選擇器，經過這個選擇器能夠快速定位到這個元素（document.querySelector(A)）javascript

<!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 herecss

}html

document.addEventListener('click', function(e){
//點擊li時，返回：html body #page .content.main .refer ul li
console.log(genCssSelector(e.target));
})java

</script>node

擴展：數組

Document 對象使咱們能夠從腳本中對 HTML 頁面中的全部元素進行訪問。函數

提示：Document 對象是 Window 對象的一部分，可經過 window.document 屬性對其進行訪問。spa

分析：code

剛開始沒讀懂題，看了下面的註釋才知道要輸出什麼，考察DOM是樹形關係，如何獲取父元素是本題的關鍵。htm

個人代碼：

 1 var genCssSelector = function(){  2         var element=arguments[0];//函數傳入的第一個參數，即點擊元素
 3         var parentElement=element.parentNode;//點擊元素的父元素
 4         var strGenCssSelector=element.tagName.toLowerCase()//獲取點擊的元素的標籤名
 5         while(parentElement.nodeName.toLowerCase()!=='#document'){  6             if(parentElement.id!==''){//父元素有id
 7                 strGenCssSelector='#'+parentElement.id+' '+strGenCssSelector;  8                 parentElement=parentElement.parentNode;  9                 continue; 10             }else if(parentElement.className!=''){//父元素有class 11                     strGenCssSelector=' '+strGenCssSelector; 12                     var classList=parentElement.className.split(' ');//按照空格分隔className，存入classList數組裏
13                     for(var i=classList.length-1;i>=0;i--){//逆序輸出
14                         strGenCssSelector='.'+classList[i]+strGenCssSelector; 15  } 16                     parentElement=parentElement.parentNode; 17                     continue; 18             }else{ 19                     strGenCssSelector=parentElement.nodeName.toLowerCase()+' '+strGenCssSelector; 20                     parentElement=parentElement.parentNode; 21                     continue; 22  } 23  } 24         return strGenCssSelector; 25     }