程式設計實現一個css選擇器總結
阿新 • • 發佈：2018-12-26
題目：實現一個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>