天天看點

阿裡前端實習筆試題

//本題相當于從内到外一級一級的向外回退

//while循環中先判斷元素的id是否為空,然後在判斷class是否為空,若不為空則名字增長

//每個符合小的條件的最後一句的在将元素向上移

var genCssSelector = function() {

//you code here

let ele = arguments[0];//擷取被點選的元素(li)

//let相當于定義了一個塊内變量,不會像var聲明變量時會發生變量提升,是以本代碼均使用let聲明變量

let parentEle = ele.parentNode;//擷取li的父元素ul

let CSelector = ele.tagName.toLowerCase();//将li轉換成小寫字母

while(parentEle.nodeName.toLowerCase() !== '#document') {

//注意:這裡為什麼是判斷是否等于‘#document’是因為html的父元素的nodeName就是‘#document’

//是以條件成立是就應該停止循環了

//上面是在判斷 當ul不等于‘document’時進入下面的循環,這裡為什麼要這樣判斷啊?

if(parentEle.id !== '') {//用來判斷ul元素的id是否為空,由html頁面可知ul的id為空

CSelector = '#' + parentEle.id + ' ' + CSelector;

parentEle = parentEle.parentNode;

continue;

} else if(parentEle.className) {//parentEle.className等于空

CSelector = ' ' + CSelector;//CSelector=' ul'

let classList = parentEle.classList || parentEle.className.split(' ');

for(var i = classList.length - 1; i >= 0; i--) {

CSelector = '.' + classList[i] + CSelector;

}

parentEle = parentEle.parentNode;

continue;

} else {

CSelector = parentEle.nodeName.toLowerCase() + ' ' + CSelector;

//第一次while循環直接進入CSelector等于ul li

parentEle = parentEle.parentNode;//parentEle就等于ul的父元素 div.refer

continue;

}

}

return CSelector;

}