JavaScript getElementsByClassName()

admin發表於2019-01-20
JavaScript

getElementsByClassName() 方法可以獲取具有指定 class 屬性值的元素集合。

集合的主要特點總結如下：

（1）.集合是動態的，自動感知集合元素的增加或者減少的變化。

（2）.集合中元素通過索引進行訪問，索引值從 0 開始計算。

（3）.低版本 IE瀏覽器不支援此方法（考慮到軟硬體的進步，本文不做相容處理）。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
node.getElementsByClassName(classname)

語法解析：

（1）.node：可以是普通的 dom 元素節點，也可以是 document 。

（2）.classname：class 屬性值，多個 class 用空格分隔。

瀏覽器支援：

（1）.IE9+ 瀏覽器支援此方法。

（2）.edge 瀏覽器支援此方法。

（3）.谷歌瀏覽器支援此方法。

（4）.opera 瀏覽器支援此方法。

（5）.火狐瀏覽器支援此方法。

（6）.safari 瀏覽器支援此方法。

程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="https://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
ul {
  width :180px;
  list-style-type: none;
  border: 2px dotted green;
  padding-left:10px
}
ul li {
  height :25px;
  line-height :25px;
  font-size :12px;
  padding: 0;
}
</style>
<script>
window.onload = ()=> {
  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>
</ul>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/202003/28/155726wfblasyyn2fy2hn1.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

將第二個和第四個 li 元素字型顏色設定為藍色，程式碼分析如下：

（1）.方法可以根據 class 屬性值檢索元素，返回值是一個集合。

（2）.所以 getElementsByClassName() 返回 class 屬性值為 "ant" 元素集合。

（3）.然後通過 for 迴圈，將集合中的元素字型顏色設定為藍色。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
ul {
  width :180px;
  list-style-type: none;
  border: 2px dotted green;
  padding-left:10px
}
ul li {
  height :25px;
  line-height :25px;
  font-size :12px;
  padding: 0;
}
.fontStyle{
  font-weight: bold;
}
</style>
<script>
window.onload = ()=> {
  let lis = document.getElementsByClassName("ant fontStyle");
  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 fontStyle">螞蟻部落二</li>
  <li class="ant">螞蟻部落三</li>
  <li class="fontStyle">螞蟻部落四</li>
  <li>螞蟻部落五</li>
  <li>螞蟻部落六</li>
</ul>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/202003/28/155753bzn8q4e998tgrn9n.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼將第二個 li 元素字型顏色設定為藍色，程式碼分析如下：

（1）.class 屬性值可以一次規定多了個類名，空格分隔，例如 <div class=" a b c">。

（2）.getElementsByClassName() 方法的引數也可以是多個類名，使用空格分隔。

（3）.元素 class 屬性值必須同時具有 "ant" 和 "fontStyle" 才能夠匹配。

（4）.所以只有第二個 li 元素的字型顏色才能夠被設定為藍色，其他都不滿足條件。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
ul {
  width :180px;
  list-style-type: none;
  border: 2px dotted green;
  padding-left:10px
}
ul li {
  height :25px;
  line-height :25px;
  font-size :12px;
  padding: 0;
}
.fontStyle{
  font-weight: bold;
}
</style>
<script>
window.onload = ()=> {
  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 fontStyle">螞蟻部落二</li>
  <li class="ant">螞蟻部落三</li>
  <li class="fontStyle">螞蟻部落四</li>
  <li>螞蟻部落五</li>
  <li>螞蟻部落六</li>
</ul>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/202003/28/155826uu8c4dp1o34q4xon.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

第二個和第三個 li 元素字型顏色被設定為藍色，程式碼分析如下：

（1）.如果想要被方法檢索到，元素 class 屬性值必須具有 getElementsByClassName() 方法引數規定的類。

（2）.第二個與第三個 li 元素滿足條件，因為class 屬性值中規定了 "ant" 樣式類。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="https://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
ul {
  width :180px;
  list-style-type: none;
  border: 2px dotted green;
  padding-left:10px
}
ul li {
  height :25px;
  line-height :25px;
  font-size :12px;
  padding: 0;
}
</style>
<script>
window.onload = ()=> {
  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">螞蟻部落二</li>
  <li>螞蟻部落三</li>
  <li class="ant">螞蟻部落四</li>
  <li>螞蟻部落五</li>
</ul>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/202003/28/155851bqksrqxjq0g0u252.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

getElementsByClassName() 方法的呼叫者可以是 document 也可以是其他普通 dom 元素節點。

使用其他元素物件可以減少方法的檢索範圍，有利於提高效率。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="https://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
ul {
  width: 150px;
  list-style-type: none;
  border: 2px dotted green;
  padding-left: 10px
}
ul li {
  height: 25px;
  line-height: 25px;
  font-size: 12px;
  padding: 0;
}
#show {
  width: 160px;
  border: 2px dotted green;
  text-align: center;
  font-size: 12px;
}
</style>
<script>
window.onload = ()=> {
  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 = ()=> {
    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，這一點需要特別注意，否則可能會造成一些不容易察覺的錯誤。

相關文章