HTML元素特性的操作方法

1.
通过DOM属性直接访问修改对应的HTML特性

<div id="div1"class="bd" title="Body text">...</div>
var div1 =document.getElementById("div1");
div1.id = 'newdiv';
div.className = "newbd";
div.title = "newTitle";
提示：所有HTML元素的所有特性，都可以通过DOM元素本身的属性来访问。只有一个例外，自定义特性。自定义特性不会以属性的形式添加到DOM对象中：

<div id="div1" class="bd" data-myAttr = "easy">...</div>

var div1 = document.getElementById("div1");

alert(div1.data-myAttr);  //VM226:1 Uncaught ReferenceError: myAttr is not defined(…)

2.

通过getAttribute方法访问元素特性

<div id="div1" class="bd" title="Body text">...</div>

var div1 = document.getElementById("div1");

alert(div1.getAttribute("id"));  //div1

alert(div1.getAttribute("class"));  //bd

alert(div1.getAttribute("title"));  //Body text

强调一点，在使用getAttribute方法的时候，元素中特性的名称是什么，我们就传入对应的参数，包括在属性访问中例外的”class”。另外， getAttribute方法也可以访问我们的自定义特性：

<div id="div1" class="bd" data-myAttr = "easy">...</div>

var div1 = document.getElementById("div1");

alert(div1.data-myAttr);  //easy

3.通过setAttribute方法设置元素特性

setAttribute可以用来为元素设置特性值。该方法接收2个参数，第一个为要设置的特性名，第二个为待设置的值。注意，如果要设置的特性不存在，该方法会创建并设置相应的值。用法很简单：

<div id="div1" class="bd" title="Body text">...</div>

var div1 = document.getElementById("div1");

div1.setAttribute("id", "newvid");

div1.setAttribute("class", "newbd");

div1.setAttribute("title", "newTitle");

div1.setAttribute("dir", "rtl");  //

设置新特性！

[/code]
另外，setAttribute方法可以设置自定义特性：

div1.setAttribute("data-myAttr", "easy");    

alert(div1.getAttribute("data-myAttr"));  //easy

如果直接使用属性的方法来添加自定义特性，该属性是不会成为元素的特性的，虽然它会存在于DOM的属性中：

div1.data-myAttr = easy;    

alert(div1.getAttribute("data-myAttr"));  //null

alert(div1.data-myAttr);  //easy

实际上

div1.data-myAttr= easy

只不过相当于我们在一个普通的JavaScript对象中添加了一个属性罢了。
另外，虽然getArrtibute和setAttribute不区分大小写，但本人认为这并不是一个好的习惯，我们在书写的时候，最好各方保持一致

4.通过removeAttribute方法删除元素特性

该方法用于彻底删除元素的特性，方法接收一个参数，即要删除的元素特性的名称。

div1.removeAttrubute("title");