JS DOM节点属性设置、值的获取——几种不同的方法及各自的利弊

1.节点属性的设置

对象.属性名=值;
对象[属性名]=值;
obj.setAttribute(pro,value)

2.节点属性值的获取：

对象.属性名
对象[属性名]
obj.getAttribute(pro)

注意：前两种设置和获取属性的方法，均需要注意特殊情况
	class   --->    	className
	for     ---> 		htmlFor
	通过get和set方法获取和设置属性，不需要变形

//例如：获取图片的class属性
var s1 = img.className;
var s2 = img['className'];
var s3 = img.getAttribute('class');
//获取图片的src属性
var s1 = oImg.src;						//绝对路径
var s2 = oImg['src'];					//绝对路径
var s3 = oImg.getAttribute('src');		//相对路径

3.getAttribute和setAttribute的弊端：

直接获取input输入框的value值 ———获取不到
(需先用setAttribute()设置属性后，才可用getAttribute()获取属性)

//例如：获取input的vlaue属性值 ( ipt输入框对象
var s=ipt.getAttribute('value');
console.log(s);  //  null  获取不到
//用setAttribute()设置属性后
ipt.setAttribute('value','哈哈哈');  // 先设置value值
var s=ipt.getAttribute('value');  // 再获取value的值
console.log(s);  // '哈哈哈'

直接获取input复选框的checked值 ———获取不到
通过 obj.setAttribute(‘checked’,false); 修改复选框的checked值 ———不能修改

//例如：获取input复选框的checked值 ( cbx复选框对象
var s=cbx.getAttribute('checked');
console.log(s);  // null
//修改复选框的checked值
var s=cbx.setAttribute('checked',false);
console.log(s);  // undefined