摘要：
1、 设置并获取标签属性值SteAttribute（'属性名称'，属性值）；一次只能定义一个。如果要定义多个，则需要执行多个操作以获得标签属性值标签对象getAttribute（'属性名称'）；获得的结果是字符串。//获取标签varoDiv1=文档。所有div的querySelector（'div'）//并将属性设置为index=0oDiv1.setAttribute（'id
一、标签属性值的设定和获取
标签对象.steAttribute('属性名称',属性值)；
一次只能定义一个，如果要定义多个，需要多次执行
获取标签属性值
标签对象.getAttribute('属性名称');
获取的结果都是字符串
//获取所有div的标签 var oDiv1 = document.querySelector('div'); //并且将属性设置为index=0 oDiv1.setAttribute('index',0); //输出设定后的结果 console.log( oDiv1 ); //获取属性名称为index的属性值 oDiv2 = oDiv1.getAttribute('index'); //输出属性名称为index的属性值 console.log( oDiv2);
二、特殊属性值的设定
// 标签对象.id = 属性值 设定id属性的属性值 oDiv.id = 'div1'; //输出id为div1的属性值 console.log( oDiv.id ) // 标签对象.className = 属性值 设定class属性的属性值 oDiv.className = 'div3'; //输出class为div2的属性值 console.log( oDiv.className ) //直接使用name操作，部分浏览器可以用，存在兼容性问题主要还是使用set,get最安全 //不推荐 oDiv.name = '张三'; console.log(oDiv.name);
总结：
A:getAttributesetAttribute是所有属性标签都通用的，建议使用
B：id设定：标签对象.id = 属性值，也可以用，最好用get和set
C：class设定：标签对象.className = 属性值，也可以用，最好用get和set
D：name设定：标签对象.className = 属性值，最好不要用，直接用get和set
E、属性值的设定是替换操作，会覆盖之前的、写在前面设的属性
三、设定标签属性值
1、标签本身具有属性，可以直接操作，也可以用gat/set来操作
var oDiv = document.querySelector('div'); oDiv.className = 'div1'; oDiv.setAttribute('class','div1')
2、单选框、复选框、checked属性
//不同浏览器存在兼容性问题，有时不能正确获取值，输出结果为undefined var oSpan = document.querySelector('span'); oSpan.setAttribute('name','spanspan)'; oSpan.setAttribute('index','第一个'); console.log(oSpan.name) console.log(oSpan.index)
3、value属性值一般用于input标签
var oBtn1 = document.querySelector('[name="btn1"]'); oBtn1.onclick = function(){ var oFile = document.querySelector('[type="file"]'); // 设定在标签内部的value属性,不起作用的,获取的结果是 空字符串 // 通过点击选择上传内容之后,可以通过value属性,正确获取数据参数 console.log(oFile.value); } var oBtn2 = document.querySelector('[name="btn2"]'); oBtn2.onclick = function(){ var oText = document.querySelector('textarea'); // 设定在标签内部的value属性,不起作用的,获取的结果是 空字符串 // 设定标签内容,或者写入内容之后,可以通过value属性获取标签数据 console.log(oText.value); }
注：
A、直接使用是classname和class的值，例如 id,class,checked
B、set方法是class和class的值，例如 index , number , res , idNumber....
C、有时会存在兼容性问题，可以互相试试