细谈 getElementsByTagName

如何获取元素相信大家已经熟的不能再熟了，比如说 getElementsByTagName 是通过标签名获取到元素对象集合，那么 getElementsByTagName 的一些细节你是否知道呢？

例如我们有以下代码

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

　　我们在 JS 中用 getElementsByTagName 获取

var lis = document.getElementsByTagName('li')
console.log(lis)

　　打印出来的是一个元素集合

HTMLCollection(5) [li, li, li, li, li]
0: li
1: li
2: li
3: li
4: li
length: 5
[[Prototype]]: HTMLCollection

　　那么这个方法有什么细节呢？

① 获取到的这个集合是动态的，也就是说，你在前面获取赋值给一个变量，然后删改节点，之前获取到的元素集合也会发生变化

② 参数 tagName 大小写不敏感，需要注意的是，当参数一样时，比如说都是  ‘li’ ，获取到的集合指针是指向同一个地址的

var lis = document.getElementsByTagName('li')
console.log(lis)
var lis2 = document.getElementsByTagName('li')
console.log(lis === lis2)

　　如果参数不一样，如

var lis = document.getElementsByTagName('li')
console.log(lis)
var lis2 = document.getElementsByTagName('LI')
console.log(lis2)
console.log(lis === lis2)

　　获取到的 lis2 内的元素对象是和 lis 里面的一样的，但是 lis2 的内存地址和 lis 不一致

③  参数可以写 '*' ，代表获取指定范围内的所有标签

var list = document.getElementsByTagName('*')
console.log(list)

HTMLCollection(14) [html, head, meta, meta, meta, title, body, ul, li, li, li, li, li, script, viewport: meta]
0: html
1: head
2: meta
3: meta
4: meta
5: title
6: body
7: ul
8: li
9: li
10: li
11: li
12: li
13: script
14: script
viewport: meta
length: 15
[[Prototype]]: HTMLCollection

④ 可以用 element.getElementsByTagName(tagName)获取指定元素内的标签

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
<ol>
    <li>01</li>
    <li>02</li>
</ol>

　　JS部分

let ol = document.querySelector('ol')
let lis3 = ol.getElementsByTagName('li')
console.log(lis3)