幸运快三极速快3|极速快3猜大小
您的位置:首頁> 前端教程> JS教程
文章導航

JavaScript 元素集合

2018-7-29 09:51| 作者: admin| 查看: 1813| 評論: 0|來自: 螞蟻部落

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

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

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

首先看一段代碼實例:

[HTML] 純文本查看 復制代碼运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.iufrl.icu/" />
<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是數組對象方法,對象對象集合不能使用。

3

鮮花
1

握手

雷人

路過

雞蛋

剛表態過的朋友 (4 人)

最新評論

返回頂部
幸运快三极速快3 赛车怎么管理本金 玩时时彩高手盈利经验 武汉篮球城超联赛 11选5历史的今天 幸运28网 11选5走势图安徽时时 7m足球比分即时比分 河北省20选5开奖公告 内蒙新时时彩开奖结果 安徽时时快三