设置属性 align，最后分别使用 3 种方法读取属性 align 的值。

var element = document.getElementById("box");

var attr = document.createAttribute("align");

attr.value = "center";

element.setAttributeNode(attr);

console.log(element.attributes["align"].value); //"center"

console.log(element.getAttributeNode("align").value); //"center"

console.log(element.getAttribute("align")); //"center"

属性节点一般位于元素的头部标签中。元素的属性列表会随着元素信息预先加载，并被存储在关联数组中。例如，针对下面 HTML 结构。

当 DOM 加载后，表示 HTML div 元素的变量 divElement 就会自动生成一个关联集合，它以名值对形式检索这些属性。

divElement.attributes = {

id : "div1",

class : "style1",

lang : "en",

title : "div"

}

在传统 DOM 中，常用点语法通过元素直接访问 HTML 属性，如 img.src、a.href 等，这种方式虽然不标准，但是获得了所有浏览器的支持。

示例2

img 元素拥有 src 属性，所有图像对象都拥有一个 src 脚本属性，它与 HTML 的 src 特性关联在一起。下面两种用法都可以很好地工作在不同浏览器中。

var img = document.getElementById("img1");

img.setAttribute("src", "http://www.w3.org"); //HTML 属性

img.src = "http://www.w3.org"; //JavaScript 属性

类似的还有 onclick、style 和 href 等。为了保证 JavaScript 脚本在不同浏览器中都能很好地工作，建议采用标准用法，而且很多 HTML 属性并没有被 JavaScript 映射，所以也就无法直接通过脚本属性进行读写。

读取属性值

使用元素的 getAttribute() 方法可以读取指定属性的值。用法如下：

getAttribute(name)

参数 name 表示属性名称。

使用元素的 attributes 属性、getAttributeNode() 方法可以返回对应属性节点。

示例1

下面示例访问红色盒子和蓝色盒子，然后读取这些元素所包含的 id 属性值。

var red = document.getElementById("red"); //获取红色盒子

console.log(red.getAttribute("id")); //显示红色盒子的id属性值

var blue = document.getElementById("blue"); //获取蓝色盒子

console.log(blue.getAttribute("id")); //显示蓝色盒子的id属性值

示例2

HTML DOM 也支持使用点语法读取属性值，使用比较简便，也获得了所有浏览器的支持。

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

console.log(red.id);

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

console.log(blue.id);

对于 class 属性，则必须使用 className 属性名，因为 class 是 JavaScript 的保留字；对于 for 属性，则必须使用 htmlFor 属性名，这与 CSS 脚本中 float 和 text 属性被改名为 cssFloat 和 cssText 是一个道理。

示例3

使用 className 读写样式类。

文本框：

var label = document.getElementById("label1");

console.log(label.className);

console.log(label.htmlFor);

示例4

对于复合类样式，需要使用 split() 方法劈开返回的字符串，然后遍历读取类样式。

//所有类名生成的数组

var classNameArray = document.getElementById("red").className.split(" ");

for (var i in classNameArray) { //遍历数组

console.log(classNameArray[i]); //当前class名

}

设置属性值

使用元素的 setAttribute() 方法可以设置元素的属性值。用法如下：

setAttribute(name, value)

参数 name 和 value 分别表示属性名称和属性值。属性名和属性值必须以字符串的形式进行传递。如果元素中存在指定的属性，它的值将被刷新；如果不存在，则 setAttribute() 方法将为元素创建该属性并赋值。

示例1

下面示例分别为页面中 div 元素设置 title 属性。

var red = document.getElementById("red"); //获取红盒子的引用

var blue= document.getElementById("blue"); //获取蓝盒子的引用 red.setAttribute("title", "这是红盒子"); //为红盒子对象设置title属性和值

blue.setAttribute("title", "这是蓝盒子"); //为蓝盒子对象设置title属性和值

示例2

下面示例定义了一个文本节点和元素节点，并为一级标题元素设置 title 属性，最后把它们添加到文档结构中。

var hello = document.createTextNode("Hello World!"); //创建一个文本节点

var h1 = document.createElement("h1"); //创建一个一级标题

h1.setAttribute("title", "你好，欢迎光临！"); //为以及标题定义title 属性

h1.appendChild(hello); //把文本节点增加到一级标题中

document.body.appendChild(h1); //把一级标题增加到文档

示例3

也可以使用快捷方法设置 HTML DOM 文档中元素的属性值。

文本框：

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

label.className = "class1";

label.htmlFor = "textfield";

DOM 支持使用 getAttribute() 和 setAttribute() 方法读写自定义属性，不过 IE 6.0 及其以下版本浏览器对其的支持不是很完善。

示例4

直接使用 className 添加类样式，会覆盖掉元素原来的类样式。这时可以采用叠加的方式添加类。

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

red.className = "red";

red.className += "blue";

示例5

使用叠加的方式添加类也存在问题，这样容易添加大量重复的类。为此，定义一个检测函数，判断元素是否包含指定的类，然后再决定是否添加类。

function hasClass (element, className) { //检测类名函数

var reg = new RegExp('(\\s|^)' + className + '(\\s|$)');

return reg.test(element.className); //使用正则检测是否有相同的样式

}

function addClass (element, className) { //添加类名函数

if (! hasClass (element, className))

element.className += ' ' + className;

}

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

addClass(red, 'red');

addClass(red, 'blue');

删除属性

使用元素的 removeAttribute() 方法可以删除指定的属性。用法如下：

removeAttribute(name)

参数 name 表示元素的属性名。

示例1

下面示例演示了如何动态设置表格的边框。

window.onload = function () { //绑定页面加载完毕时的事件处理函数

var table = document.getElementByTagName("table")[0]; //获取表格外框的引用

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

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

del.onclick = function () {

table.removeAttribute("border");

}

reset.onclick = function () {

table.setAttribute("border", "2");

}

数据表格

删除恢复

在上面示例中设计了两个按钮，并分别绑定了不同的事件处理函数。单击“删除”按钮即可调用表格的 removeAttribute() 方法清除表格边框，单击“恢复”按钮即可调用表格的 setAttribute() 方法重新设置表哥便可的粗细。

示例2

下面示例演示了如何自定义删除类函数，并调用该函数删除指定类名。

function hasClass (element, className) { //类名检测函数

var reg = new RegExp ('(\\s|^)' + className + '(\\s|$)');

return reg.test (element, className); //使用正则检测是否有相同的样式

}

function deleteClass (element, className) {

if (hasClass (element, className)) {

element.className.replace (reg, ' '); //捕获要删除样式，然后替换为空白字符串

}

}

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

deleteClass (red, 'blue');

上面代码使用正则表达式检测 className 属性值字符串中是否包含指定的类名，如果存在，则使用空字符串替换掉匹配到的子字符串，从而实现删除类名的目的。

使用类选择器

HTML 5 为 document 对象和 HTML 元素新增了 getElementsByClassName() 方法，使用该方法可以选择指定类名的元素。getElementsByClassName() 方法可以接收一个字符串参数，包含一个或多个类名，类名通过空格分隔，不分先后顺序，方法返回带有指定类的所有元素 NodeList。

浏览器支持状态：IE 9+、Firefox 3.0+、Safari 3+、Chrome 和 Opera 9.5+。

如果不考虑兼容早期 IE 浏览器或者怪异模式，用户可以放心使用。

示例1

下面示例使用 getElementsByClassName("red") 方法选择文档中所有包含 red 类的元素。

var divs = document.getElementsByClassName("red");

for (var i = 0; i < divs.length; i ++) {

console.log(divs[i].innerHTML);

}

示例2

下面示例使用 document.getElementById("box") 方法先获取