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