分享一道1分钟前做的阿里在线编程题
刚刚吃完中饭，非常悠闲地打开邮箱发现阿里网申可以再投了，于是就投了一下。然后发现居然有一个编程测验，就点开准备做一下，然后去晒了个被子，回来发现这个测验是有时间限制（30分）的！
题目是这样的：
<!DOCTYPE html>
<html lang="en">
<head>
...
</head>
<body>
<div id="page">
<div class="content main">
<div class="refer">
<ul>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</body>
<script>
var genCssSelector = function () {
// 完成这儿的代码
}
document.addEventListener('click', function (e) {
//点击li时，返回：html body #page .content.main .refer ul li
console.log(genCssSelector(e.target));
});
</script>
</html> 还是很有趣的，我们往往是通过选择器来获取元素节点，而这道题是要求传入元素节点获得选择器字符串（可以直接在document.querySelector方法内使用）。我的思路很单纯，便是获得节点的tag,className,id然后拼接，再对父元素重复这个过程......最后代码如下：
var genCssSelector = function () {
let selectorArr = [];
function nodeSelector(el) {
let id = '';
let className = '';
let tagName = '';
if (el.id)
id = el.id.split(' ').map(item => '#' + item).join('');
if (el.className)
className = el.className.split(' ').map(item => '.' + item).join('');
tagName = el.nodeName.toLowerCase();
selectorArr.unshift(tagName + id + className);
if (el.parentNode !== document)
nodeSelector(el.parentNode);
}
let el = arguments[0];
nodeSelector(el);
return selectorArr.join(' ');
} 不过这完全没有考虑属性选择器，毕竟时间来不及了俺觉得这也可以了，有更好的方案欢迎交流。
当然，结果是我写完上面这一坨，切换到试卷页面，发现已经交卷了，白卷 (´_ゝ`)
投递阿里云等公司10个岗位 >