JavaScript: What's the difference between HTML attribute and DOM property?
May 23, 2015

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

Categories

JavaScript HTML