根据标签获取元素
根据标签名获取元素有两种方式，分别是通过document对象获取元素和通过element对象获取元素，如下所示。
document.getElementsByTagName('标签名');
element.getElementsByTagName('标签名');上述代码中的element是元素对象的统称，通过元素对象可以查找该元素的子元素或后代元素，实现局部查找元素的效果，而document对象是从整个文档中查找元素。
由于相同标签名的元素可能有多个，上述方法返回的不是单个元素对象，而是一个集合。这个集合是一个类数组对象，或称为伪数组，它可以像数组一样用索引来访问元素，但不能使用push()等方法。使用Array.isArray()也可以证明它不是一个数组。
下面通过具体代码进行演示。
1 <body>
2 <ul>
3 <li>苹果</li><li>香蕉</li><li>西瓜</li><li>樱桃</li>
4 </ul>
5 <ol id="ol">
6 <li>绿色</li><li>蓝色</li><li>白色</li><li>红色</li>
7 </ol>
8 <script>
9 var lis = document.getElementsByTagName('li');
10 // 结果为：HTMLCollection(8) [li, li, li, li, li, li, li, li]
11 console.log(lis);
12 // 查看集合中的索引为0的元素，结果为：
13 console.log(lis[0]);
14 // 遍历集合中的所有元素
15 for (var i = 0; i < lis.length; i++) {
16 console.log(lis[i]);
17 }
18 // 通过元素对象获取元素
19 var ol = document.getElementById('ol');
20 // 结果为：HTMLCollection(4) [li, li, li, li]
21 console.log(ol.getElementsByTagName('li'));
22 </script>
23 </body>上述代码中，第2~4行定义了一个<ul>无序列表，第5~7行定义了一个id为ol的<ol>有序列表。第9~17行代码演示了document.getElementsByTagName()的用法，其中第9行返回的是所有<li>标签元素对象的集合。需要注意的是，即使页面中只有一个li元素，返回结果仍然是一个集合，如果页面中没有该元素，那么将会返回一个空的集合。
通过第11行代码的输出结果可以看出，lis是一个包含8个li元素的集合对象，这个对象的构造函数是HTMLCollection。第13行返回了集合中的第一个li元素。第15~17行采用遍历的方式依次打印了集合里面的元素对象。
第18~21行演示了element.getElementsByTagName()的用法，这里的element必须是单个元素对象，不能是一个集合，所以需要用document.getElementById()获取元素，再调用方法。第21行使用getElementsByTagName()去获取ol中的所有li元素。
点击此处
隐藏目录
隐藏目录
