js 添加属性_有趣的JS小知识：name属性的妙用

我们知道不管是document对象下的images还是getElementsByTagName()等获取元素节点的方法也好，最终返回的都是一个HTMLCollection (节点集合)，神奇的是，在要获取的元素节点上添加name标签属性并设置值，会有意想不到的效果。

没添加name属性前是这样的：（以img标签为例）

html代码：
<img src="" alt="1">
<img src="" alt="2">
<img src="" alt="3">
​
js代码：
console.log(document.getElementsByTagName("img"));

打印结果：

在标签中添加了name属性后就是这样的：

<img src="" alt="1">
<img src="" alt="2">
<img src="" alt="3" name="wula">  <!--这里添加了name属性-->

打印结果：

也就是说在标签中添加的name属性 值会成为集合中的属性wula，这意味着什么让我来告诉你！我们常见通过下标（上图中展开的每个img前的序号）获取集合中对应的元素节点，见下面代码：

document.getElementsByTagName("img")[0]; /*下标0*/

能够这样获取本质上是因为在集合对象中数据都是 键值对的形式存储，上图那些数字序号就是键，值为img元素节点，获取对象内的数据是通过 对象.属性名的方式，我们看到的document.xxx也是对象点属性名获取值，但在js中不能直接点数字，所以在这里就得使用中括号代替点进行操作，于是就以[0]获取对象的属性值。同理，name标签属性值wula成为了集合对象内的键值对的键，意味着还能有另一种方式去获取集合内的name属性值为wula的元素。

这样也就多了一种筛选的途径，需要注意，一般name标签属性多用在表单元素上，所以这种取值方式是可以用来进行相同标签标签的筛选的。