DOM — 操作元素属性

前端技术 everyinch 1826℃ 0评论

获取和设置元素属性(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&#91;i&#93;, "value", "" );
}

// 为name值为invalid的<input>元素增加边框
var input = tag("input");
for ( var i = 0; i < input.length; i++ ) {
    if ( attr( input&#91;i&#93;, "name" ) == 'invalid' ) {
        input&#91;i&#93;.style.border = "2px solid red";
    }
}
&#91;/code&#93;

除此之外还可以为元素增加新属性,然后再次获取,完全不用修改文档的实际属性。例如一个列表,单击列表展开它的描述。HTML代码是:

&#91;code lang="html"&#93;
<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 — 操作元素属性

喜欢 (1)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

无觅相关文章插件,快速提升流量