您的位置:首页> 前端教程> JS教程
文章导航

JavaScript 元素集合

2018-7-29 09:51| 作者: admin| 查看: 2084| 评论: 0|来自: 蚂蚁部落

在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是数组对象方法,对象对象集合不能使用。

3

鲜花
1

握手

雷人

路过

鸡蛋

刚表态过的朋友 (4 人)

最新评论

返回顶部