阿里前端实习笔试题

最新推荐文章于 2024-06-28 13:00:49 发布

原创最新推荐文章于 2024-06-28 13:00:49 发布 · 448 阅读

CC 4.0 BY-SA版权

该博客主要讨论了一道前端实习笔试题，涉及如何生成CSS选择器。通过遍历DOM节点，检查元素的ID和class属性，逐级构建选择器。当遇到有ID的父元素时，选择器加入ID；若有class，则反向遍历添加class；否则，使用元素标签名。最后返回生成的选择器字符串。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//本题相当于从内到外一级一级的向外回退
//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;
}