获取和设置元素属性（attribute）的值是最常使用的操作之一。通常，元素自带的属性列表会存储成关联数组格式。例如：
<form name="myForm" action="/test.cgi" method="POST"> ... </form>
一旦DOM加载完毕，HTML表单元素的变量 formElem 就会有一个关联数组：
formElem.attributes = {
name: "myForm",
action: "/test.cgi",
method: "POST"
};
如何才能检查某个属性是否存在？一个可行的办法是使用 getAttribute 函数并且检查返回值是否为 null
function hasAttribute( elem, name ) {
return elem.getAttribute(name) != null;
}
根据使用的DOM文档的类型，从元素中获取属性的方法有两种。第一是XML DOM的方式，即使用 getAttribute 和 setAttribute。例如：
id(“everywhere”).getAttribute(“id”); // 获取属性 tag(“input”)[0].setAttribute(“value”,“Your Name”); // 设置属性
第二种方法是采用getter和setter的方法。使用它们有助于编写精炼的代码。
tag(“input”)[0].value; // 获取属性 tag(“div”)[0].id = “main”; // 设置属性
这种方法的局限是属性名称有可能和JavaScript的保留字冲突，例如用 element.className 而不是 element.class。这样的冲突包括 class、for、float和text，分别用className、htmlFor、cssFloat和cssText代替。为了简化这种处理流程，编写了自定义的函数来处理。attr函数用来处理这种情况，当使用两个参数来调用这个函数时，比如 attr(element,id)，返回指定元素属性的值；而使用3个参数调用时，例如 attr(element,class,test)，则是设置属性并返回新值。
function attr(elem, name, value) {
// 确保提供的 name 是正确的
if ( !name || name.constructor != String ) return '';
// 检查 name 的命名情形
name = { 'for': 'htmlFor', 'class': 'className' }[name] || name;
// 如果用户传入 value 参数，则
if ( value != null ) {
// 首先使用 setter 方式
elem[name] = value;
// 可以的话，使用 setAttribute
if ( elem.setAttribute )
elem.setAttribute(name,value);
}
// 返回属性的值
return elem[name] || elem.getAttribute(name) || '';
}
例：在DOM元素中使用 attr 函数设置和获取属性的值
// 设置<h1>元素的class
attr( tag("h1")[0], "class", "header" );
// 设置各个<input>元素的值
var input = tag("input");
for ( var i = 0; i < input.length; i++ ) {
attr( input[i], "value", "" );
}
// 为name值为invalid的<input>元素增加边框
var input = tag("input");
for ( var i = 0; i < input.length; i++ ) {
if ( attr( input[i], "name" ) == 'invalid' ) {
input[i].style.border = "2px solid red";
}
}
[/code]
除此之外还可以为元素增加新属性，然后再次获取，完全不用修改文档的实际属性。例如一个列表，单击列表展开它的描述。HTML代码是：
[code lang="html"]
<html>
<head>
<title>Expandable Definition List</title>
<style>dd { display: none; }</style>
</head>
<body>
<h1>Expandable Definition List</h1>
<dl>
<dt>Cats</dt>
<dd>A furry, friendly, creature.</dd>
<dt>Dog</dt>
<dd>Like to play and run around.</dd>
<dt>Mice</dt>
<dd>Cats like to eat them.</dd>
</dl>
</body>
</html>
相应的脚本如下：
// 直至DOM可用
domReady(function(){
// 遍历所有的dt
var dt = tag(“dt”);
for ( var I = 0; I < dt.length; i++ ) {
// 点击事件
addEvent( dt[i], "click", function() {
// 检查描述打开与否
var open = attr( this, "open" );
// 切换 display 属性
next( this ).style.display = open ? 'none' : 'block';
// 记录open属性的值
attr( this, "open", open ? '' : 'yes' );
});
}
});
[/code]
转载请注明：陈童的博客 » DOM — 操作元素属性
