DOM — 操作元素属性
获取和设置元素属性（attribute）的值是最常使用的操作之一。通常，元素自带的属性列表会存储成关联数组格式。例如：[code lang="html"]
...
[/code]
一旦DOM加载完毕，HTML表单元素的变量 formElem 就会有一个关联数组：
[code lang="js"]
formElem.attributes = {
name: "myForm",
action: "/test.cgi",
method: "POST"
};
[/code]
如何才能检查某个属性是否存在？一个可行的办法是使用 getAttribute 函数并且检查返回值是否为 null
[code lang="js"]
function hasAttribute( elem, name ) {
return elem.getAttribute(name) != null;
}
[/code]
根据使用的DOM文档的类型，从元素中获取属性的方法有两种。第一是XML DOM的方式，即使用 getAttribute 和 setAttribute。例如：
[code lang="js"]
id(“everywhere”).getAttribute(“id”); // 获取属性
tag(“input”)[0].setAttribute(“value”,“Your Name”); // 设置属性
[/code]
第二种方法是采用getter和setter的方法。使用它们有助于编写精炼的代码。
[code lang="js"]
tag(“input”)[0].value; // 获取属性
tag(“div”)[0].id = “main”; // 设置属性
[/code]
这种方法的局限是属性名称有可能和JavaScript的保留字冲突，例如用 element.className 而不是 element.class。这样的冲突包括 class、for、float和text，分别用className、htmlFor、cssFloat和cssText代替。为了简化这种处理流程，编写了自定义的函数来处理。attr函数用来处理这种情况，当使用两个参数来调用这个函数时，比如 attr(element,id)，返回指定元素属性的值；而使用3个参数调用时，例如 attr(element,class,test)，则是设置属性并返回新值。
[code lang="js"]
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) || '';
}
[/code]
例：在DOM元素中使用 attr 函数设置和获取属性的值
[code lang="js"]
// 设置元素的class
attr( tag("h1")[0], "class", "header" );
// 设置各个元素的值
var input = tag("input");
for ( var i = 0; i < input.length; i++ ) {
attr( input[i], "value", "" );
}
// 为name值为invalid的元素增加边框
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"]
Expandable Definition List
dd { display: none; }
Expandable Definition List
Cats
A furry, friendly, creature.
Dog
Like to play and run around.
Mice
Cats like to eat them.
[/code]
相应的脚本如下：
[code lang="js"]
// 直至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 — 操作元素属性
Tags: