JavaScript元素集合介紹

admin發表於2018-07-29
JavaScript

在JavaScript很多文章中都會遇到類似這樣的概念，元素集合。

下面就介紹一下如何獲得元素集合，它有什麼樣的特點。

所謂集合，從感性上來講，類似於多個或者大量東西在一起，JavaScript元素集合確實有類似特點。

首先看一段程式碼例項：

[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 type="text/javascript"> 
window.onload=function() { 
  var lis = document.getElementsByTagName("li");
  var 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中。

JavaScript中有很多方法屬性可以獲取元素集合，下面列舉幾個比較常用的：

（1）.getElementsByClassName()方法。

（2）.querySelectorAll()方法。

（3）.childNodes屬性。

（4）.children屬性。

可以通過length屬性獲取集合中元素數量：

[JavaScript] 純文字檢視 複製程式碼
lis.length //獲取集合中元素數量

通過索引可以獲取指定位置的元素物件：

[JavaScript] 純文字檢視 複製程式碼
var lis = document.getElementsByTagName("li");
lis[1] //獲取索引位置為1的元素物件，索引從0開始。

雖然集合的很多特點和陣列比較類似，都可以使用索引訪問元素，都有length屬性等，但是有本質區別。

想要證明這一點很簡單，陣列物件所有的方法元素物件集合不能使用（報錯）。

程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼
var lis = document.getElementsByTagName("li");
lis.pop(); //程式碼會報錯
var odiv = document.getElementById("show");
odiv.innerHTML = lis.length;

上面的程式碼會報錯，pop是陣列物件方法，物件物件集合不能使用。

相關文章