JavaScript 获取与设置元素属性的三种方式

示例HTML结构

本节以如下HTML结构作为示例基础。

 
<div id="myDiv" class="bd" title="我是div">
<img id="img1" />
<a id="myA" href = "http://www.baidu.com">百度</a>
</div>

直接属性访问方式

1. 利用HTMLElement类型对象的属性进行获取与设置

 
var div = document.getElementById("myDiv");
var img = document.getElementById("img1");
var a = document.getElementById("myA");
// 获取元素特性
alert(div.id); // 输出 "myDiv"
alert(div.className); // 输出 "bd"，此处使用className而非class，因为class是JavaScript保留关键字
alert(div.title); // 输出 "我是div"
alert(a.href); // 输出 http://www.baidu.com
// 设置元素特性
div.id = "myDiv2"; // 将id修改为 "myDiv2"
div.className = "ft"; // 将class修改为 "ft"，若存在名为 "ft" 的CSS样式，浏览器会立即应用该样式
div.title = "我是myDiv2"; // 将title修改为 "我是myDiv2"
div.align = "center"; // 设置居中对齐
img.src = "images/img1.gif"; // 设置图片源路径
a.innerHTML = "新浪"; // 将链接文本从 "百度" 改为 "新浪"
a.href = "http://www.sina.com.cn"; // 重新定义超链接地址

DOM方法操作特性

2. 使用getAttribute()、setAttribute()和removeAttribute()方法（不推荐常规使用，前两个方法在IE6/7中存在异常，第三个方法在IE6中不支持，但设置自定义特性时可用）

getAttribute() 方法用于获取元素特性，接收一个参数，即要获取的特性名称。

setAttribute() 方法用于设置元素特性，接收两个参数，分别为特性名称和特性值。

removeAttribute() 方法用于移除元素特性，接收一个参数，即要移除的特性名称。

 
var div = document.getElementById("myDiv");
var img = document.getElementById("img1");
var a = document.getElementById("myA");
// 获取元素特性
alert(div.getAttribute("id")); // 输出 "myDiv"
alert(div.getAttribute("class")); // 输出 "bd"，注意此处使用class而非className，与直接属性访问不同
alert(div.getAttribute("title")); // 输出 "我是div"
alert(a.getAttribute("href")); // 输出 http://www.baidu.com
// 设置元素特性
div.setAttribute("id","myDiv2"); // 将id修改为 "myDiv2"
div.setAttribute("class","ft"); // 将class修改为 "ft"，此处同样使用class而非className
div.setAttribute("title","我是myDiv2"); // 将title修改为 "我是myDiv2"
div.setAttribute("align","center"); // 设置居中对齐
img.setAttribute("src","images/img1.gif"); // 设置图片源路径
// 移除元素特性
div.removeAttribute("class"); // 移除class特性

attributes属性节点操作

3. 通过attributes属性获取、设置和移除元素特性

 
var div = document.getElementById("myDiv");
// 获取元素特性
alert(div.attributes["id"].nodeValue); // 输出 "myDiv"
// 设置元素特性
div.attributes["id"].nodeValue = "myDiv2"; // 将id修改为 "myDiv2"
// 移除元素特性
div.attributes.removeNamedItem("class"); // 移除class特性