详解JavaScript中attribute和property的区别以及最佳实践
2015年5月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"]
  1. 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"
  1. 非自定义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

  1. 非自定义的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"
  1. 带有默认值的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');

分类

JavaScript HTML