利用setAttribute方法为HTML元素添加或修改属性值

setAttribute()它允许我们对属性节点的值做出修改。与getAttribute一样&＃xff0c;setAttribute也只能用于元素节点&＃xff1a;

var shopping &＃61; document.getElementById("purchases");
shopping.setAttribute("title","a list of goods");

在下面的例子里&＃xff0c;第一语句得到id为purchase的元素&＃xff0c;第二条语句把这个元素的title属性值设置为a list of goods:

var shopping &＃61; document.getElementById("purchases");
alert(shopping.getAttribute("title"));
shopping.setAttribute("title", "a list goods");
alert(shopping.getAttribute("title"));

我们可以用getAttribute来证明这个元素的title属性值确实发生了变化&＃xff1a;

var shopping &＃61; document.getElementById("purchases");
alert(shopping.getAttribute("title"));
shopping.setAttribute("title", "a list goods");
alert(shopping.getAttribute("title"));

加载页面后将填出两个alert对话框&＃xff1a;第一个alert对话框出现在setAttribute被调用之前&＃xff0c;它将是一篇空白或显示单词”null“&＃xff1b;第二个出现在设置title属性之后&＃xff0c;天将显示“a list of gods”消息。

在上例中&＃xff0c;我们设置了一个节点的title属性&＃xff0c;这个属性原先并不存在。这表明setAttribute实际完成了两项操作&＃xff1a;先创建这个属性&＃xff0c;然后设置它的值。如果setAttribute用在一个本身就有这个属性的元素节点上&＃xff0c;这个属性值就会被覆盖掉。

在前面文章里提到的“购物清单”示例文档里&＃xff0c;p元素已经有了一个title属性&＃xff0c;这个属性的值是a gentle reminder。可以用setAtribute 来改变它的值&＃xff1a;

var paras &＃61; document.getElementsByTagName("p");
for (var i &＃61;0; i < paras.length; i&＃43;&＃43;) {
var title_text &＃61; paras[i].getAttribute("title");
if (title_text) {
paras[i].setAttribute("title", "brand new title text");
alert(paras[i].getAttribute("title"));
}
}