JavaScript getElementsByTagName()

admin發表於2019-01-20
JavaScript

首先從其名稱入手，getElementsByTagName 由四個單詞合成：

（1）.get：具有“獲取”的意思。

（2）.elements：具有“元素”的意思，是複數形式，由此可以推想此方法不止獲取一個元素。

（3）.by：具有“通過”的意思，表示獲取元素的手段。

（4）.TagName：具有 “標籤名稱” 的意思，比如 div 、p 或者 span 等

顧名思義，getElementsByTagName() 方法可以獲取指定標籤名的元素集合。

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

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

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

語法結構：

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

語法解析：

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

（2）.tagname：必需，標籤名稱，比如 p、div 或者 span 等。

瀏覽器支援：

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

（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 :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 lis = document.getElementsByTagName("li");
  let oDiv = document.getElementById("show");
  oDiv.innerHTML = lis.length;
} 
</script> 
</head> 
<body> 
<ul id="box">
  <li>螞蟻部落一</li>
  <li>螞蟻部落二</li>
  <li>螞蟻部落三</li>
  <li>螞蟻部落四</li>
  <li>螞蟻部落五</li>
</ul>
<div id="show"></div>
</body> 
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/202003/29/121943c1791f4g74o4g4k9.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

通過 getElementsByTagName() 獲取頁面的 li 元素集合，然後將集合中 li 元素的數量寫入 div。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="https://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
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;
}
</style>
<script> 
window.onload = ()=> { 
  let lis = document.getElementsByTagName("li");
  lis[1].style.color="blue";
} 
</script> 
</head> 
<body> 
<ul id="box">
  <li>螞蟻部落一</li>
  <li>螞蟻部落二</li>
  <li>螞蟻部落三</li>
  <li>螞蟻部落四</li>
  <li>螞蟻部落五</li>
</ul>
</body> 
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/202003/29/122007p241kw9fwv26spe2.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

通過索引可以訪問集合中的每一個元素，索引值從 0 開始計算。

0 表示第一個元素，1 表示第二個元素，以此類推，length-1 表示最後一個元素。

所以上述程式碼可以將第二個 li 元素字型顏色設定為藍色。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="https://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
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;
}
</style>
<script> 
window.onload = ()=> { 
  let oUl=document.getElementById("box");
  let lis = oUl.getElementsByTagName("li");
  lis[1].style.color="blue";
} 
</script> 
</head> 
<body> 
<ul id="box">
  <li>螞蟻部落一</li>
  <li>螞蟻部落二</li>
  <li>螞蟻部落三</li>
  <li>螞蟻部落四</li>
  <li>螞蟻部落五</li>
</ul>
</body> 
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/202003/29/122037gc1zu1da9v787az1.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="https://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
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 lis = document.getElementsByTagName("li");
  let oDiv = document.getElementById("show");
  let oBt = document.getElementById("bt");
  oDiv.innerHTML = lis.length;
  oBt.onclick = ()=> {
    lis[0].remove();
    oDiv.innerHTML = lis.length;
  }
} 
</script> 
</head> 
<body> 
<ul id="box">
  <li>螞蟻部落一</li>
  <li>螞蟻部落二</li>
  <li>螞蟻部落三</li>
  <li>螞蟻部落四</li>
  <li>螞蟻部落五</li>
</ul>
<div id="show"></div>
<input type="button" id="bt" value="檢視效果"/>
</body> 
</html>

程式碼分析如下：

（1）.預設集合中的li元素有五個，所以 div 顯示數字5。

（2）.點選按鈕，刪除第一個 li 元素，可以發現 div 的數字變為 4。

（3）.由此可見，集合是動態的，能夠自動感知集合中元素的刪除與新增。

認識到這一點非常重要，否則可能會導致一些非常奇怪的現象，並且不容易查詢錯誤。

下面演示一個由於集合動態導致的常見的錯誤，程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
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;
}
</style>
<script> 
window.onload = ()=> { 
  let lis = document.getElementsByTagName("li");
  for(let index=0;index<lis.length;index++){
      lis[index].remove();
  }
} 
</script> 
</head> 
<body> 
<ul id="box">
  <li>螞蟻部落一</li>
  <li>螞蟻部落二</li>
  <li>螞蟻部落三</li>
  <li>螞蟻部落四</li>
  <li>螞蟻部落五</li>
</ul>
</body> 
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/202003/29/122119gg3h39gjwoq9zwg9.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.上述程式碼的本來目的是通過 for 迴圈刪除集合中的所有元素。

（2）.然而事實，並沒有完全刪除所有元素，還剩餘兩個元素未被刪除。

（3）.這就是集合是動態的原因導致的。

（4）.當刪除第一個元素之後，集合元素數量由五變為四，原來的第二個元素變為第一個元素，index 變為 1。

（5）.第二次迴圈的時候，刪除的不是原來的第二個元素，而是第三個元素，於是導致原來第二個 li 沒有被刪除。

（6）.此時集合的數量變為三，index 變為 2。

（7）.第三次迴圈的時候，刪除的不是原來的第三個元素，而是原來第五個元素。

只要明白這個動態現象，上述現象就比較容易理解了，解決方案如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="https://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
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;
}
</style>
<script> 
window.onload = ()=> { 
  let lis = document.getElementsByTagName("li");
  for(let index = 0;lis.length > 0;){
      lis[index].remove();
  }
} 
</script> 
</head> 
<body> 
<ul id="box">
  <li>螞蟻部落一</li>
  <li>螞蟻部落二</li>
  <li>螞蟻部落三</li>
  <li>螞蟻部落四</li>
  <li>螞蟻部落五</li>
</ul>
</body> 
</html>

上述程式碼可以刪除所有 li 元素，非常簡單，每一次迴圈都可以刪除集合中的第一個元素。

只要判斷集合的數量只要大於 0，說明集合中還有 li 元素沒有被刪除，那麼繼續f迴圈。

相關文章