It is easy to confuse attribute with property when manipulating DOM object by JavaScript. document.getElementById('test').getAttribute('id')
, $('#test').attr('id')
, document.getElementById('test').id
and $('#test').prop('id')
return the same id: "test". In this article, I will explain the differences between attribute and property.
Attribute
Attributes are defined by HTML, all definitions inside HTML tag are attributes.
<div id="test" class="button" custom-attr="1"></div>
document.getElementById('test').attributes; // return: [custom-attr="hello", class="button", id="test"]
The type of attributes is always string. For the
DIV
above,document.getElementById('test').getAttribute('custom-attr')
or$('#test').attr('custom-attr')
returns string: "1".
Property
Properties belong to DOM, the nature of DOM is an object in JavaScript. We can get and set properties as we do to a normal object in JavaScript and properties can be any types.
document.getElementById('test').foo = 1; // set property: foo to a number: 1 document.getElementById('test').foo; // get property, return number: 1 $('#test').prop('foo'); // read property using jQuery, return number: 1
$('#test').prop('foo', { age: 23, name: 'John' }); // set property foo to an object using jQuery document.getElementById('test').foo.age; // return number: 23 document.getElementById('test').foo.name; // return string: "John"
Non-custom attributes have 1:1 mapping onto properties, like: id, class, title, etc.
<div id="test" class="button" foo="1"></div>
document.getElementById('test').id; // return string: "test" document.getElementById('test').className; // return string: "button" document.getElementById('test').foo; // return undefined as foo is a custom attribute
Notice: We need to use "className" when get and set "class" by property because "class" is a JavaScript reserved word.
Non-custom propertiy (attribute) changes when corresponding attribute (property) changes in most cases.
<div id="test" class="button"></div>
var div = document.getElementById('test'); div.className = 'red-input'; div.getAttribute('class'); // return string: "red-input" div.setAttribute('class','green-input'); div.className; // return string: "green-input"
Attribute which has a default value doesn't change when corresponding property changes.
<input id="search" value="foo" />
var input = document.getElementById('search'); input.value = 'foo2'; input.getAttribute('value'); // return string: "foo"
Best Practice
It is recommended to use property in JavaScript as it's much easier and faster. Especially for boolean type attributes like: "checked", "disabled" and "selected", browser automatically converts them into boolean type properties.
<input id="test" class="blue" type="radio" />
Good practice
// get id
document.getElementById('test').id;
// set class
document.getElementById('test').className = 'red';
// get and set radio control status
document.getElementById('test').checked;
document.getElementById('test').checked = true;
$('#test').prop('checked');
$('#test').prop('checked', true);
Bad practice
// get id
document.getElementById('test').getAttribute('id');
// set class
document.getElementById('test').setAttribute('class', 'red');