本文详解JavaScript中操作HTML元素特性的三种核心方法。首先介绍通过HTMLElement对象直接读写属性的方式及其注意事项，如class需转为className；其次解析getAttribute、setAttribute和removeAttribute方法的用法及IE兼容性问题；最后讲解利用attributes属性节点进行特性管理的技巧。内容涵盖代码示例与浏览器行为差异，帮助开发者掌握DOM属性操作的最佳实践。
示例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特性