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

1. 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"]

2. 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

1. 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"

2. 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.

3. 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"

4. 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');