使用js设定标签属性，利用循环遍历给标签添加事件

设定标签属性

给标签添加属性

语法

标签对象.setAttribute('属性名称' , 属性值);

一次只能定义一个属性，如果要定义多个属性，要执行多次。例如：

标签对象.setAttribute('属性名称1' , 属性值1);
标签对象.setAttribute('属性名称2' , 属性值2);

获取标签属性的属性值

语法

标签对象.getAttribute('属性名称');

获取到的结果，都是字符串类型。

实例

<div>我是div</div>

<script>
    var oDiv = document.querySelector('div');
    
    // 给 div 标签,添加属性index 属性值是0
    oDiv.setAttribute('index' , 0);
    oDiv.setAttribute('key' , '第一个div');
    
    // 获取标签属性的属性值
    console.log( oDiv.getAttribute('index') );
</script>

几个特殊的属性设定方式

id属性 class属性

通过直接定义在标签对象上的方法设定。
可以直接定义或者获取。

实例

<div>我是div</div>

<script>
    var oDiv = document.querySelector('div');
    
    // 标签对象.id = 属性值   设定id属性的属性值
    oDiv.id = 'div1';
    
    // 标签对象.className = 属性值   设定class属性的属性值
    oDiv.className = 'div2';
    
    // 标签对象.id   获取标签对象,id属性值
    console.log( oDiv.id );
    
    // 标签对象.className   获取标签对象,class属性值
    console.log( oDiv.className );
</script>

name属性

直接操作name属性，并不是所有的浏览器都支持的。
因此实际项目中设定 name 属性还是使用 set，get 最安全。

实例

<div>我是div</div>

<script>
    var oDiv = document.querySelector('div');
    
    oDiv.name = '张三';
    console.log(oDiv.name);
</script>

总结

1. 可以通过 setAttribute() 设定标签所有的属性 包括 id , class
   可以通过 getAttribute() 所有标签所有的属性的属性值 包括 id , class
所有的属性，设定或者获取，都建议通过set，get完成。

2. id和class属性可以直接通过 标签对象.id和标签对象.className
来设定或者获取。

3. 根据不同版本的浏览器，有一些不在标签对象本身属性上的，也可以直接设定。
   例如：name , title
   但是因为浏览器兼容问题，推荐还是使用set,get  

4. 这里属性值的设定，是替换操作，会覆盖之前的设定属性，而不是新增添加属性操作。

······································································································································

循环遍历给标签添加事件/操作

通过循环，每次对一个标签进行操作。
循环结束，对数组中存储的所有标签，都进行操作，给数组中的所有标签都绑定 click 事件。

实例

// 1. 获取标签对象的集合，也就是数组形式的
var oLis = document.querySelectorAll('li');
console.log(oLis);

// 2. 通过 forEach() 等 方式，循环遍历数组中的对象，给这些标签，添加设定/绑定事件
// 定义的第一个形参,存储的是数组的数据对象,也就是li标签
oLis.forEach(function( itme ){
    itme.onclick = function(){
        // 输出的是相同的内容
        console.log(123);
    }
})

for 循环遍历与 forEach 循环遍历

这两种循环遍历虽然都能达到添加事件的效果，但是操作方面还是有较大差别，而且有时候可能会陷入误区，下面我们从一个demo中了解一下差别在哪：

实例

<ul>
    <li>我是第一个标签</li>
    <li>我是第二个标签</li>
    <li>我是第三个标签</li>
    <li>我是第四个标签</li>
    <li>我是第五个标签</li>
</ul>
<script>
    // 点击第一个li标签标签,输出 1
    // 点击第二个li标签标签,输出 2
    // 点击第三个li标签标签,输出 3
    // 点击第四个li标签标签,输出 4
    // 点击第五个li标签标签,输出 5

    var oLis = document.querySelectorAll('li');

    
    oLis.forEach(function(item , key){
        item.onclick = function(){
            // 输出的是标签的索引+1
            console.log(key+1);
        }
    });


    for(var i = 0 ; i <= oLis.length-1 ; i++){

        // 在绑定事件之前
        // 先给所有的标签,定义属性 index 属性值是 循环变量
        // 这里定义的属性的属性值,是不会随着程序的执行而改变的

        // oLis 是一个伪数组,存储所有li标签
        // i是模拟生成的索引下标  
        // oLis[i]是通过索引下标,获取数组的数据内容,也就是li标签
        oLis[i].setAttribute('index' , i);

        oLis[i].onclick = function(){
            // 在点击事件中,此处所有的循环变量 i ,数值都是5


            // 此时输出的内容,不是i,是定义在标签上的index属性的属性值
            // 获取index属性的属性值,作为输出的内容

            // this,是指向指代的作用,起到替换指定目标,或者指定对象的作用
            // 赋值式函数,声明式函数,this指向的是window
            // 对象当中的函数,this指向的是这个对象
            // 绑定事件时,事件处理函数,this,指向的是绑定这个事件的标签对象
            // 此处使用this,来替换 oLis[i] , 因为最终i的值是5
            // 必须使用this来指定绑定事件的标签对象 oLis[i] 在点击事件中,无法调用正确的标签对象
            // 也就是对应的li标签

            // 获取的属性值,是字符串类型,要执行迅运算,需要转化为数值类型
            // 方法 parseInt()  -0   *1   /1   前面写+
            var ind = this.getAttribute('index')-0;

            // 输出的是获取到的属性值
            // 数值已经转化为数值类型,再来执行 加法操作
            console.log(ind+1);
        }
    }
</script>

总结for循环和forEach()的区别

for循环

第一次循环建立一个循环变量 i ，
之后每次循环，都是操作的这个循环变量
是对一个循环变量，重复赋值
不管循环多少次，都只是建立一个变量 i ，对这个变量 重复赋值，进行操作
操作到最后，只有一个 i 存储最终的数值

绑定事件，并且执行
执行事件时，for循环已经执行完毕，i 的数值是5
执行程序，虽然点击的标签不同，但是 i 都是一个变量 最终数值都是5
点击标签不同，i 都是相同的 5 ， i + 1都是6
点击任意标签，触发的都是 i+1为 6 的效果。

如果要是使用for循环完成效果
就要给标签，添加属性，在属性中，存储当前的索引值
执行时，再调用这个索引值

forEach()

forEach() 定义变量的方式和 for循环不同

虽然 变量名称没有改变，但是 每次循环都会创建一个独立不同的变量
存储的数值，也是独立的不同的数值，而且相互之间不会影响

此时当forEach() 循环结束时，循环几次，就有几个独立的变量，存储每次循环对应的数据内容

此时触发事件 每个事件中 变量存储的都是独立的不同的相互不影响的数据数值