web前端学习

概述

在JavaScript中使用getAttribute()函数来获取元素的属性值使用setAttribute()函数来修改元素的属性值属性的增删改查

方法	释义
getAttribute	获取某一个属性的值
setAttribute	建立一个属性，并同时给属性捆绑一个值
createAttribute	仅建立一个属性
removeAttribute	删除一个属性
getAttributeNode	获取一个节点作为对象
setAttributeNode	建立一个节点
removeAttributeNode	删除一个节点

1.获取元素的属性值

	
<p id="attr_id" name="old_attr_name">
	这是查看DOM元素的属性
</p>

这是查看DOM元素的属性

	
attr_obj = document.getElementById("attr_id");
console.info(attr_obj.getAttribute("name"));
console.info(attr_obj.attributes["name"].value);
//获取所有属性
console.info(attr_obj.attributes);
console.info(attr_obj.attributes.length);

2.修改元素的属性值

	
<p id="attr_id2" name="old_attr_name2">
	这是修改DOM元素的属性
</p>

这是修改DOM元素的属性

	
attr_obj2 = document.getElementById("attr_id2");
attr_obj2.setAttribute("name","new_attr_name");

3.增加元素的属性

	
<p id="attr_id3" name="old_attr_name3">
	这是增加DOM元素的属性					
</p>

这是增加DOM元素的属性

	
var good_attr = document.createAttribute("good");
good_attr.nodeValue = "hehe";
attr_id3 = document.getElementById("attr_id3");
attr_id3.setAttributeNode(good_attr);
console.log(attr_id3);

4.删除元素的属性

	
<p id="attr_id4" name="old_attr_name4" bad="haha">
	这是删除DOM元素的属性					
</p>

这是删除DOM元素的属性

	
var attr_id4 = document.getElementById("attr_id4");
var attr_id4_attr = attr_id4.getAttributeNode("bad");			
attr_id4.removeAttributeNode(attr_id4_attr);
console.log("元素的bad属性被删除了");
console.log(attr_id4.attributes);

注意

1、createAttribute在使用的时候不需要基于对象的，document.createAttribute()就可以。 2、setAttribute，createAttribute在使用的时候如果是使用的时候不要使用name，type，value等单词。 3、createAttribute在使用的时候如果只定义了名字，如果没有node.nodeValue = "hello"; 语句给属性定义值，FF会认为是一个空字符串，IE认为是undefined。 getAttributeNode，setAttributeNode，removeAttributeNode三个方法的特点是都直接操作一个node（节点）。