详解JavaScript中attribute和property的区别以及最佳实践

2015年05月23日

使用JavaScript操作DOM元素时往往涉及到两个概念:attributepropertydocument.getElementById('test').getAttribute('id')$('#test').attr('id')document.getElementById('test').id$('#test').prop('id') 都能返回正确的id:"test"。这篇文章主要介绍一下 propertyattribute 的区别以及如何使用。

Attribute

  1. Attribute由HTML来定义,并不存在于DOM中,即:只要是HTML标签内定义的都是attribute。

    <div id="test" class="button" custom-attr="1"></div>
    
    document.getElementById('test').attributes;
    // 返回:[custom-attr="hello", class="button", id="test"]
    
  2. Attribute是String类型。对于上面的div,document.getElementById('test').getAttribute('custom-attr')$('#test').attr('custom-attr') 都会返回string: "1"。

Property

  1. Property属于DOM,DOM的本质就是JavaScript中的一个object。我们可以像操作普通object一样读取、设置property,property可以是任意类型。

    document.getElementById('test').foo = 1;
    // 设置property:foo为number: 1
    document.getElementById('test').foo;
    // 读取property,返回number:1
    $('#test').prop('foo');
    // jQuery读取property,返回number:1
    
    $('#test').prop('foo', {
        age: 23,
        name: 'John'
    });
    // jQuery设置property:foo为一个object
    document.getElementById('test').foo.age;
    // 返回number:23
    document.getElementById('test').foo.name;
    // 返回string:"John"
    
  2. 非自定义attribute,如id、class、titile等,都会有对应的property映射。

    <div id="test" class="button" foo="1"></div>
    
    document.getElementById('test').id; 
    // 返回string:"test"
    document.getElementById('test').className;
    // 返回string:"button"
    document.getElementById('test').foo;
    // 返回undefined,因为foo是自定义attribute
    

    注:由于 class 为JavaScript的保留关键字,所以通过property操作class时应使用 className

  3. 非自定义的property或attribute的变化多数是联动的。

    <div id="test" class="button"></div>
    
    var div = document.getElementById('test');
    div.className = 'red-input';
    div.getAttribute('class');
    // 返回string:"red-input"
    div.setAttribute('class','green-input');
    div.className;
    // 返回string:"green-input"
    
  4. 带有默认值的attribute不随property变化而变化。

    <input id="search" value="foo" />
    
    var input = document.getElementById('search');
    input.value = 'foo2';
    input.getAttribute('value');
    // 返回string:"foo"
    

最佳实践

使用JavaScript操作property更为方便、快捷,并且property支持各种不同的类型,尤其是对于布尔类型的attribute的自动转换,如:checked、disabled、selected等。

<input id="test" class="blue" type="radio" />

推荐用法

// 获取id
document.getElementById('test').id;
// 更改class
document.getElementById('test').className = 'red';
// 获取、设置状态
document.getElementById('test').checked;
document.getElementById('test').checked = true;
$('#test').prop('checked');
$('#test').prop('checked', true);

不推荐的用法

// 获取id
document.getElementById('test').getAttribute('id');
// 更改class
document.getElementById('test').setAttribute('class', 'red');

关键字:

HTMLJavaScript