getElementsByClassName()
HTML標籤的class屬性是最重要的屬性之一。
通過此屬性可以設定元素的樣式，JavaScript也可以利用此屬性檢索元素。
getElementsByClassName方法可以獲取具有指定class屬性值的元素，返回值是一個集合。
集合是動態的，能夠自動感知集合中元素增加或者減少，後面會有程式碼例項演示。
當前具有一定瀏覽器相容性問題，低版本IE瀏覽器不支援，隨著軟硬體的不斷進步，此方法的應用會越來越廣泛，如果需要相容低版本IE，不用擔心，本文最後會給出相容低版本IE瀏覽器的解決方案。
語法結構：
[JavaScript] 純文字檢視 複製程式碼getElementsByClassName(classname)
引數解析：
（1）.classname：必需，class屬性值。
瀏覽器支援：
（1）.IE9+瀏覽器支援此方法。
（2）.edge瀏覽器支援此方法。
（3）.谷歌瀏覽器支援此方法。
（4）.opera瀏覽器支援此方法。
（5）.火狐瀏覽器支援此方法。
（6）.safria瀏覽器支援此方法。
程式碼例項：
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> #box li { width: 350px; height: 25px; line-height: 25px; } </style> <script> window.onload = function () { let lis = document.getElementsByClassName("ant"); let len=lis.length; for (let index = 0; index < len; index++) { lis[index].style.color = "blue"; } } </script> </head> <body> <ul id="box"> <li>螞蟻部落一</li> <li class="ant">螞蟻部落二</li> <li>螞蟻部落三</li> <li class="ant">螞蟻部落四</li> <li>螞蟻部落五</li> <li>螞蟻部落六</li> </ul> </body> </html>
程式碼執行效果截圖如下：
上述程式碼將第二個和第四個li元素字型顏色設定為藍色，程式碼分析如下：
（1）.方法可以根據class屬性值檢索元素，返回值是一個集合。
（2）.所以上述程式碼返回class屬性值為"ant"的元素集合。
（3）.然後通過for迴圈，將集合中的元素字型顏色設定為藍色。
特別說明：引數值是class屬性值，千萬不要在其見面加點，和querySelector與querySelectorAll區分開。
上述兩個方法的具體用法可以參閱如下兩篇文章：
（1）.querySelector() 方法一章節。
（2）.querySelectorAll方法一章節。
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> #box li { width: 350px; height: 25px; line-height: 25px; } .fontsize{ font-size: 20px; } </style> <script> window.onload = function () { let lis = document.getElementsByClassName("ant fontsize"); let len=lis.length; for (let index = 0; index < len; index++) { lis[index].style.color = "blue"; } } </script> </head> <body> <ul id="box"> <li>螞蟻部落一</li> <li class="ant fontsize">螞蟻部落二</li> <li class="ant">螞蟻部落三</li> <li class="fontsize">螞蟻部落四</li> <li>螞蟻部落五</li> <li>螞蟻部落六</li> </ul> </body> </html>
程式碼執行效果截圖如下：
上述程式碼將第二個li元素字型顏色設定為藍色，程式碼分析如下：
（1）.class屬性值可以一次規定多了個類名，使用空格分隔，例如<div class=" a b c">。
（2）.getElementsByClassName方法的引數也可以是多個類名，使用空格分隔。
（3）.元素class屬性值必須同時具有"ant"和"fontsize"才能夠匹配。
（4）.所以只有第二個li元素的字型顏色才能夠被設定為藍色，其他的li元素都不滿足條件。
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> #box li { width: 350px; height: 25px; line-height: 25px; } .fontsize{ font-size: 20px; } </style> <script> window.onload = function () { let lis = document.getElementsByClassName("ant"); let len=lis.length; for (let index = 0; index < len; index++) { lis[index].style.color = "blue"; } } </script> </head> <body> <ul id="box"> <li>螞蟻部落一</li> <li class="ant fontsize">螞蟻部落二</li> <li class="ant">螞蟻部落三</li> <li class="fontsize">螞蟻部落四</li> <li>螞蟻部落五</li> <li>螞蟻部落六</li> </ul> </body> </html>
程式碼執行效果截圖如下：
第二個和第三個li元素字型顏色被設定為藍色，程式碼分析如下：
（1）.如果想要被方法檢索到，元素class屬性值必須具有getElementsByClassName方法引數規定的類。
（2）.第二個與第三個li元素滿足條件，也可以看到無需完全匹配。
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> #box li { width: 350px; height: 25px; line-height: 25px; } .fontsize{ font-size: 20px; } </style> <script> window.onload = function () { let obox=document.getElementById("box"); let lis = obox.getElementsByClassName("ant"); let len=lis.length; for (let index = 0; index < len; index++) { lis[index].style.color = "blue"; } } </script> </head> <body> <ul id="box"> <li>螞蟻部落一</li> <li class="ant fontsize">螞蟻部落二</li> <li class="ant">螞蟻部落三</li> <li class="fontsize">螞蟻部落四</li> <li>螞蟻部落五</li> <li>螞蟻部落六</li> </ul> </body> </html>
程式碼執行效果截圖如下：
與前一個程式碼表現完全一樣，程式碼分析如下：
（1）.方法的呼叫物件沒必要必須是document物件，也可以是其他元素物件。
（2）.使用其他元素物件可以減少方法的檢索範圍，有利於提高效率。
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> #box li { width: 350px; height: 25px; line-height: 25px; } .fontsize{ font-size: 20px; } </style> <script> window.onload = function () { let obox=document.getElementById("box"); let obt=document.getElementById("bt"); let oshow=document.getElementById("show"); let lis = obox.getElementsByClassName("ant"); oshow.innerHTML=lis.length; obt.onclick=function(){ lis[0].remove(); oshow.innerHTML=lis.length; } } </script> </head> <body> <ul id="box"> <li>螞蟻部落一</li> <li class="ant fontsize">螞蟻部落二</li> <li class="ant">螞蟻部落三</li> <li class="fontsize">螞蟻部落四</li> <li>螞蟻部落五</li> <li>螞蟻部落六</li> </ul> <div id="show"></div> <input type="button" id="bt" value="檢視演示"/> </body> </html>
此方法獲取的元素集合是動態的，也就是能夠自動感知集合元素的新增或者刪除。
預設，集合中的元素是兩個，點選按鈕之後，刪除集合中的第一個li元素，集合能夠感知這種改變，所以div中顯示的數量變為1，這一點需要特別注意，否則可能會造成一些比較奇特的錯誤，並且還不容易差錯。
文章的開頭部分提到過，低版本IE瀏覽器不支援此方法，雖然以後是問題，但是當前還有不少低版本IE使用者，可能需要進行相容，下面分享一段能夠相容所有瀏覽器的方法改寫，程式碼例項如下：
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html><html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> .ant{ width:150px; height:50px; margin:0px auto; background:#CCC; text-align:center; font-size:12px; } </style> <script> if(!document.getElementsByClassName){ document.getElementsByClassName = function(className, element){ var children = (element || document).getElementsByTagName('*'); var elements = new Array(); for (var index=0; index<children.length; index++){ var child = children[index]; var classNames = child.className.split(' '); for (var j=0; j<classNames.length; j++){ if (classNames[j] == className){ elements.push(child); break; } } } return elements; }; } window.onload=function(){ var odiv=document.getElementsByClassName("ant")[0]; odiv.innerHTML="螞蟻部落"; } </script> </head> <body> <div class="ant"></div> </body> </html>
上述程式碼對getElementsByClassName方法進行了相容性處理。