设定标签属性

给标签添加属性

语法

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

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

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

获取标签属性的属性值

语法

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

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

实例

<div>我是div</div><script>var oDiv = document.querySelector('div');// 给 div 标签,添加属性index 属性值是0oDiv.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标签标签,输出 5var oLis = document.querySelectorAll('li');oLis.forEach(function(item , key){item.onclick = function(){// 输出的是标签的索引+1console.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() 循环结束时，循环几次，就有几个独立的变量，存储每次循环对应的数据内容此时触发事件 每个事件中 变量存储的都是独立的不同的相互不影响的数据数值

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

(js)模板字符串中使用循环遍历数据：
(js)模板字符串中使用循环遍历数据: // 数据格式 let wordList = {id: "2",question: "李四",content: [{ n ...
利用循环栏目导航标签及自定义页面制作帝国CMS网站地图
网站地图,又称站点地图,它就是一个页面,上面放置了网站上所有页面的链接.也简洁地表现了网站栏目关系,一般就包含顶级栏目和二级栏目.搜索引擎蜘蛛非常喜欢网站地图.在帝国CMS中没有生成网站地图的功能,所 ...
java循环遍历类属性_java循环遍历类属性 get 和set值方法
//遍历sqspb类成员为String类型属性为空的全部替换为"/" Field[] fields = sqspb.getClass().getDeclaredFields() ...
oracle中的cursor属性有哪些,Oracle学习11：游标（cursor）--显式游标隐式游标、游标四个属性、循环遍历...
1.概述上文PLSQL学习中提到的知识,可以发现,基本都可以通过Java等语言实现,而为了实现程序的可移植性,实际开发工作中我们也是如此做的. 那么PLSQL的重点是什么呢?接下来我们来介绍游标cu ...
Vue.js：vue指令（给标签属性赋Vue变量v-bind，绑定事件 v-on）vue事件处理函数中, 拿到事件对象，6个事件修饰符
1. 给标签属性赋Vue变量v-bind 在vue中,v-bind指令可以动态的给标签的属性设置值, 语法:v-bind:属性名="vue变量" 简写::属性名="vue ...
html5标签属性大全_html5 文本相关标签
html5 文本相关标签一.标题 h1.h1.hgroup(标题组) 1.什么情况下使用标题? 01.标题是概括性的简短文字 02.标题能概括随后的内容 2.主标题与副标题 01.主标题 02.副标 ...
jq添加标签属性_前端-jq创建标签/添加属性/css属性
jq创建标签 var ptag = $(' '); jq添加属性如href,id,class,name等 $('#content').attr('class/id/name/href', 'activ ...
Vue.js 判断对象属性是否存，不存在添加
Vue.set是可以对对象添加属性的,这里item对象添加一个checked属性 //if(typeof item.checked=='undefined'){if(!this.item.checke ...
深入理解JavaScript的闭包特性如何给循环中的对象添加事件
初学者经常碰到的,即获取HTML元素集合,循环给元素添加事件.在事件响应函数中(event handler)获取对应的索引.但每次获取的都是最后一次循环的索引.原因是初学者并未理解JavaScript ...

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