前言：document.getElementsByClassName这个方法只能在ie8以上的浏览器使用，也就是说getElementsByClassName是在支持html5的浏览器下才能执行。
为了让ie9以下的浏览器能够支持这个方法于是自己写了个getElementsByClassName脚本方法让浏览器也能够像jquery那样拿到Class就能获取对象。
function getElementsByClassName(className){
var elements = [];
if(!document.getElementsByClassName){
var domNodes = document.getElementsByTagName("*");
for(var i =0 ;i<domNodes.length;i++){
if(domNodes[i].className){
var classNames = domNodes[i].className.split(" "); /*这里其实还要考虑类名间隔大于一个空格的情况*/
for(var j = 0;j<classNames.length;j++){
if(classNames[j]==className){
elements.push(domNodes[i]);
}
}
}
}
}else{
/*这里既然浏览器支持这个行为，为何不直接return document.getElementsByClassName(className) ？？？*/
var domNodes = document.getElementsByClassName(className);
for(var i =0 ;i<domNodes.length;i++){
elements.push(domNodes[i]);
}
}
return elements;
} 自定义css选择器
2018阿里前端实习在线编程-实现一个css选择器总结
题目：
实现一个getCssSelector方法，可以根据给定的元素生成一个css选择器，通过这个选择器可以快速定位到这个元素（document.querySelector(A)）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="page">
<div class="content main">
<div class="refer">
<ul>
<li></li>
<li></li>
...
</ul>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
//根据上述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>
扩展：
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。
分析：
刚开始没读懂题，看了下面的注释才知道要输出什么，考察DOM是树形关系，如何获取父元素是本题的关键。
代码
var genCssSelector = function(){
var element=arguments[0];//函数传入的第一个参数，即点击元素
var parentElement=element.parentNode;//点击元素的父元素
var strGenCssSelector=element.tagName.toLowerCase()//获取点击的元素的标签名
while(parentElement.nodeName.toLowerCase()!=='#document'){
if(parentElement.id!==''){//父元素有id
strGenCssSelector='#'+parentElement.id+' '+strGenCssSelector;
parentElement=parentElement.parentNode;
continue;
}else if(parentElement.className!=''){//父元素有class
strGenCssSelector=' '+strGenCssSelector;
var classList=parentElement.className.split(' ');//按照空格分隔className，存入classList数组里
for(var i=classList.length-1;i>=0;i--){//逆序输出
strGenCssSelector='.'+classList[i]+strGenCssSelector;
}
parentElement=parentElement.parentNode;
continue;
}else{
strGenCssSelector=parentElement.nodeName.toLowerCase()+' '+strGenCssSelector;
parentElement=parentElement.parentNode;
continue;
}
}
return strGenCssSelector;
}参考：
https://www.cnblogs.com/Arlar/p/5651509.html
http://haiqiancun.com/bbs/bbsPage/0/detail/297e9e7946a599780146a5a38dde0003/1/20140806112531
https://www.cnblogs.com/shenminer/p/8610015.html