getElementsByClassName()

admin發表於2019-01-20

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>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201901/20/231931fymtw9m3ymyzy8yd.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼將第二個和第四個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>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201901/20/232036tx9yyt126aa7ovxa.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼將第二個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>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201901/20/232104b55blpu0p9us91wb.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

第二個和第三個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>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201901/20/232155b20yjz8asr7gt89r.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

與前一個程式碼表現完全一樣，程式碼分析如下：

（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方法進行了相容性處理。

相關文章