核心提示：最近的一道面试题： 得到 class id tagName!DOCTYPE htmlhtmlheadmeta charset=UTF-8titleDocument/title/headbodyp id...
最近的一道面试题： 得到 class id tagName
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p id="page">
<p class="content main">
<p class="refer">
<ul>
<li></li>
<li></li>
</ul>
</p>
</p>
</p>
</body>
</html>
<script>
/* 根据上述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>
方法一 用对象加属性方法避免数组元素重复
var genCssSelector = function(){
//your code here
var len = arguments.length,
str = {},
a = arguments;
for (var i = 0; i < len; i++) {
if(a[i].tagName.toLowerCase() == 'head' ||
a[i].tagName.toLowerCase() == 'script' ||
a[i].tagName.toLowerCase() == 'style') {
continue;
}
if(a[i].className) {
var arr = a[i].className.split(' ');
arr.forEach(function(data) {
str['.' + data] = 0;
});
} else if(a[i].id){
str['#' + a[i].id] = 0;
} else {
str[a[i].tagName.toLowerCase()] = 0;
}
if(a[i].children.length !== 0){
str[genCssSelector.apply(null, a[i].children)] = 0;
}
}
return Object.keys(str).join(' ');
}
方法二 同样的思想 用 indexOf()判断
var genCssSelector = function(){
//your code here
var len = arguments.length,
str = [],
a = arguments;
for (var i = 0; i < len; i++) {
if(a[i].tagName.toLowerCase() == 'head' ||
a[i].tagName.toLowerCase() == 'script' ||
a[i].tagName.toLowerCase() == 'style') {
continue;
}
if(a[i].className) {
var arr = a[i].className.split(' ');
arr.forEach(function(data) {
if (str.indexOf('.' + data) === -1) {
str.push('.' + data);
}
});
} else if(a[i].id){
if (str.indexOf('#' + a[i].id) === -1) {
str.push('#' + a[i].id);
}
} else {
if (str.indexOf(a[i].tagName.toLowerCase()) === -1) {
str.push(a[i].tagName.toLowerCase());
}
}
if(a[i].children.length !== 0){
str.push(genCssSelector.apply(null, a[i].children));
}
}
return str.join(' ');
}
