getElementsByTagName()
掌握一個方法的功能，可以首先從它的名稱入手，getElementsByTagName由四個單詞合成：
（1）.get：具有“獲取”的意思。
（2）.elements：具有“元素”的意思，是複數形式，由此可以推想此方法不止獲取一個元素。
（3）.by：具有“通過”的意思，表示獲取元素的手段。
（4）.TagName：具有“標籤名稱”的意思，比如div、p或者span等
知曉名稱的構成，很容易推測功能，此方法可以獲取具有指定標籤名的元素集合。
特別說明：
（1）.方法的返回值是一個集合，即便集合只有一個元素。
（2）.集合中元素的索引位置是從0開始。
（3）.集合是動態的，可能這一條不好理解，不用擔心，後面會有程式碼演示。
語法結構：
[JavaScript] 純文字檢視 複製程式碼elem.getElementsByTagName(tagname)
引數解析：
（1）.tagname：必需，標籤名稱，比如p、div或者span等。
瀏覽器支援：
（1）.IE瀏覽器支援此方法。
（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"> ul,li { list-style:none;} </style> <script> window.onload=function() { let lis = document.getElementsByTagName("li"); let odiv = document.getElementById("show"); odiv.innerHTML = lis.length; } </script> </head> <body> <div id="show"></div> <ul id="box"> <li>螞蟻部落一</li> <li>螞蟻部落二</li> <li>螞蟻部落三</li> <li>螞蟻部落四</li> <li>螞蟻部落五</li> </ul> </body> </html>
程式碼執行效果截圖如下：
上述程式碼通過方法可以獲取頁面的li元素集合，然後將集合中元素的數量寫入div。
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> *{padding:0px;} ul,li { list-style:none;} </style> <script> window.onload=function() { let lis = document.getElementsByTagName("li"); let odiv = document.getElementById("show"); lis[1].style.color="blue"; } </script> </head> <body> <ul id="box"> <li>螞蟻部落一</li> <li>螞蟻部落二</li> <li>螞蟻部落三</li> <li>螞蟻部落四</li> <li>螞蟻部落五</li> </ul> </body> </html>
程式碼執行效果截圖如下：
通過索引可以訪問集合中的每一個元素，索引是從0開始計算的。
也就是0表示第一個元素，1表示第二個元素，以此類推，length-1表示最後一個元素。
所以上述程式碼可以將第二個li元素字型顏色設定為藍色。
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> *{padding:0px;} ul,li { list-style:none;} </style> <script> window.onload=function() { let oul=document.getElementById("box"); let lis = oul.getElementsByTagName("li"); let odiv = document.getElementById("show"); lis[1].style.color="blue"; } </script> </head> <body> <ul id="box"> <li>螞蟻部落一</li> <li>螞蟻部落二</li> <li>螞蟻部落三</li> <li>螞蟻部落四</li> <li>螞蟻部落五</li> </ul> </body> </html>
程式碼執行效果截圖如下：
此方法的功能與前一個程式碼完全一樣，程式碼分析如下：
（1）.很多朋友往往認為此方法的呼叫者一定是document物件，這其實是一種思維定式。
（2）.也可以使用其他物件呼叫此方法，這樣的話就可以在此物件下檢索指定標籤，可以減少檢索範圍。
（3）.上述程式碼是在id屬性值為"box"的元素下檢索li元素，而不是在整個文件，效率更好。
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> *{padding:0px;} ul,li { list-style:none;} </style> <script> window.onload=function() { let lis = document.getElementsByTagName("li"); let odiv = document.getElementById("show"); let obt=document.getElementById("bt"); odiv.innerHTML = lis.length; obt.onclick=function(){ 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 type="text/css"> *{padding:0px;} ul,li { list-style:none;} </style> <script> window.onload=function() { 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>
程式碼執行效果截圖如下：
程式碼分析如下：
（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="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> *{padding:0px;} ul,li { list-style:none;} </style> <script> window.onload=function() { 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迴圈。