在JavaScript很多文章中都会遇到类似这样的概念，元素集合。
下面就介绍一下如何获得元素集合，它有什么样的特点。
所谓集合，从感性上来讲，类似于多个或者大量东西在一起，JavaScript元素集合确实有类似特点。
首先看一段代码实例：
`<!doctype html>`
`<``html``>`
`<``head``>`
`<``meta` `charset``=``"utf-8"``>`
`<``meta` `name``=``"author"` `content``="http://www.aiqianduan.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属性获取集合中元素数量：
`lis.length` `//获取集合中元素数量`
通过索引可以获取指定位置的元素对象：
`var` `lis = document.getElementsByTagName(``"li"``);`
`lis[1]` `//获取索引位置为1的元素对象，索引从0开始。`
虽然集合的很多特点和数组比较类似，都可以使用索引访问元素，都有length属性等，但是有本质区别。
想要证明这一点很简单，数组对象所有的方法元素对象集合不能使用（报错）。
代码实例如下：
`var` `lis = document.getElementsByTagName(``"li"``);`
`lis.pop();` `//代码会报错`
`var` `odiv = document.getElementById(``"show"``);`
`odiv.innerHTML = lis.length;`
上面的代码会报错，pop是数组对象方法，对象对象集合不能使用。
专注全栈大前端，爱前端整理了一批最新WEB前端教学视频，不论是零基础学习还是在职提升，这些资料都会给你带来帮助，爱前端帮助所有想要学好前端的同学，学习规划、学习路线、学习资料、问题解答。全栈大前端技术交流群：137503198
点击加入群聊【全栈大前端技术交流解答】
爱前端-专注前端大前端
网友评论