前言：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