有趣的题目 - 找出页面上的所有class
2017-03-25 本文已影响91人
小菜燕
日前，遇见一道有趣的面试题。题目如题，就是找出页面上的所有class。
for example，现在给出一个页面的代码，如下，让你拿到页面上所有的class。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>interview</title>
<link rel="stylesheet" href="../sass/index.scss">
</head>
<body>
<div class="container">
<div class="title rank-title">排行榜标题</div>
<ul class="rank-list">
<li class="rank-item">这是排行榜1</li>
<li class="rank-item">这是排行榜2</li>
<li class="rank-item">这是排行榜3</li>
<li class="rank-item">这是排行榜4</li>
<li class="rank-item">这是排行榜5</li>
<li class="rank-item">这是排行榜6</li>
<li class="rank-item">这是排行榜7</li>
<li class="rank-item">这是排行榜8</li>
</ul>
<div class="title name-title name-desc">名字列表</div>
<ul class="name-list">
<li class="name"><a href="#" class="name-link">名字1</a></li>
<li class="name"><a href="#" class="name-link">名字2</a></li>
<li class="name"><a href="#" class="name-link">名字3</a></li>
<li class="name"><a href="#" class="name-link">名字4</a></li>
<li class="name"><a href="#" class="name-link">名字5</a></li>
<li class="name"><a href="#" class="name-link">名字6</a></li>
</ul>
</div>
<script type="text/javascript" src="../js/jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="../js/interview.js"></script>
</body>
</html>
有兴趣的小伙伴，可以先试试要怎么做。要解这道题，有几种不同的解法。
思路一
遍历页面上的元素，如果元素有class，则存入数组，最后，对该数组进行去重。
实现方法一
原始简陋的写法，所用到的API分别有：
document.getElementsByTagNamechildren
/**
* 原始写法
* @param {[JSON]} json [description ]
* @return {[]}
*/
var arr = [];
function getAllClass(element) {
var eleClass = element.getAttribute('class');
if(eleClass && eleClass.length > 0) {
var eleClassArr = eleClass.split(' ');
arr = arr.concat(eleClassArr);
}
var childrens = element.children;
if(childrens && childrens.length > 0) {
var len = childrens.length;
for(var i=0; i<len; i++) {
getAllClass(childrens[i])
}
}
return filter(arr);
}
/**
* 去重
* @param {[JSON]} json [description ]
* @return {[]}
*/
function filter(arr) {
var classArr = [];
arr.forEach(function(i) {
if(classArr.indexOf(i) < 0) {
classArr.push(i)
}
})
return classArr;
}
console.log(getAllClass(document.getElementsByTagName('body')[0]));
实现方法二
改进的写法，用到的API分别有：
document.getElementsByTagNamechildrenArrary.prototype.slice.callSetArray.from
var arr = [];
function getAllClass(element) {
var classes = [];
if(element.getAttribute('class') !== null) {
classes = element.getAttribute('class').split(/\s/);
}
arr = arr.concat(classes);
var childrens = element.children;
Array.prototype.slice.call(childrens).forEach(function(elem){
getAllClass(elem);
})
/**
* Set对arr里面的class进行去重
* Array.from 将Set结构变成数组形式
*/
return Array.from(new Set(arr));
}
getAllClass(document.getElementsByTagName('body')[0]);
实现方法三
改进获取标签的方法。所用到的API有：
querySelectorAll
在前面两种方式，都采用了递归来获取标签，但是其实，有个更简便的方式可以获取页面上的所有标签。
var tags = document.querySelectorAll('*')
以上一行代码，就可以获取页面上所有的标签。
因此，根据我们一开始的思路，很快可以得出以下的解法：
/**
* 获取页面所有class
* @param {[JSON]} json [description ]
* @return {[]}
*/
var arr = [];
function getAllClass() {
var tags = document.querySelectorAll('*');
tags.forEach(function(elem) {
if(elem.getAttribute('class')) {
arr = arr.concat(elem.getAttribute('class').split(/\s/))
}
})
return Array.from(new Set(arr));
}
getAllClass();
思路二
直接获取页面上有class的标签，然后对这类标签进行处理。
那怎么获取页面上有class的标签呢？方法很简单，同样也是通过querySelectorAll这个API。
var tagClasses = document.querySelectorAll('[class]');
通过这句代码，就可以获取页面上的所有带class的标签。
那么，接下来，我们就可以对这些标签进行处理。
var arr = [];
function getAllClass() {
var tagsClasses = document.querySelectorAll('[class]');
tagsClasses.forEach(function(elem) {
arr = arr.concat(elem.getAttribute('class').split(/\s/))
})
return Array.from(new Set(arr));
}
后语
几种不同的解法，都使用了新的API，比如Set，Array.from等等。如果小伙伴不是很了解的话，建议可以去看看MDN的介绍。
