设定标签属性
给标签添加属性
语法
javascript">标签对象.setAttribute('属性名称' , 属性值);
一次只能定义一个属性，如果要定义多个属性，要执行多次。例如：
javascript">标签对象.setAttribute('属性名称1' , 属性值1);
标签对象.setAttribute('属性名称2' , 属性值2);
获取标签属性的属性值
语法
javascript">标签对象.getAttribute('属性名称');
获取到的结果，都是字符串类型。
实例
<div>我是div</div>
<script>javascript">
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>javascript">
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>javascript">
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 事件。
实例
javascript">// 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>javascript">
// 点击第一个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() 循环结束时，循环几次，就有几个独立的变量，存储每次循环对应的数据内容
此时触发事件 每个事件中 变量存储的都是独立的不同的相互不影响的数据数值
