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

ゝ一纸荒年。 2023-05-28 05:26 36阅读 0赞

# 设定标签属性 #

### 给标签添加属性 ###

##### 语法 #####

标签对象.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() 循环结束时，循环几次，就有几个独立的变量，存储每次循环对应的数据内容
    
    此时触发事件 每个事件中 变量存储的都是独立的不同的相互不影响的数据数值