What is the difference between properties and attributes in HTML?

HTML is the standard language for creating documents that are intended to be displayed on web browsers. It is very usual to get confused with attributes and properties while performing DOM object manipulation in JavaScript. Before learning about the differences, let us first define the Document Object Model.

DOM: It is the acronym for the Document Object Model. When the browser parses your HTML code, it creates a corresponding DOM node. The HTML properties are accessed from this node object.

In simpler terms, DOM is an API for the HTML and we use languages like JavaScript or frameworks like React, Vue.js to access and manipulate the HTML using the corresponding DOM objects.

Notes:

  1. Some DOM properties don’t have corresponding attributes.
  2. Some HTML properties don’t have corresponding properties.
  3. Some HTML attributes, like ‘id’, have 1:1 mapping to properties.

Let us take a look at some quick examples to demonstrate the differences between attributes and properties.



Example: Consider the following HTML code snippet.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<body>
    <input id="input" type="number" 
            value="Phone Number:">
  
    <p id="display"></p>
  
    <script>
        var element = document.getElementById("input");
  
        // Getting the property, returns "Phone Number:"
        window.alert(element.getAttribute("value"));
  
        element.value = 1234;
        var x = element.value;
  
        // Getting the attribute, returns "1234"
        document.getElementById("display").innerHTML
            = "Value Attribute: " + x; 
    </script>
</body>
  
</html>          

chevron_right


Output:

Now, let us consider that the user inputs “1234”, then the element.getAttribute(“value”) will return “Phone Number:” because we have provided this as the initial value of this attribute. But element.value will return “1234”.

Thus, the value attribute has the initial text-content that was provided by the developer in the HTML source code because the value property reflects the current text-content inside the input box (provided by the user in this case).

Now we have a basic idea about the difference, let us dive deep and learn about more differences.

Attribute: Attributes are defined by HTML and are used to customize a tag.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<body>
  
    <p>
        Click the button the display 
        the number of attributes
        associated with it.
    </p>
      
    <button id="AttributeDemo" 
        onclick="myFunction()">
        Try it
    </button>
      
    <p id="display"></p>
  
    <script>
        function myFunction() {
            var Attrdemo = document.getElementById(
                "AttributeDemo").attributes.length;
  
            document.getElementById(
                "display").innerHTML = Attrdemo;
        }
    </script>
</body>
  
</html>

chevron_right


The output is 2 because the two attributes are: id=”AttributeDemo” and onclick=”myFunction()”.



Note: The document.getElementsById(‘AttributeDemo’).attributes code snippet returns a collection of the specified node’s attributes, as a NamedNodeMap object. To access the nodes, we can use the generic indexing method. Replace the following line in the above code snippet.

filter_none

edit
close

play_arrow

link
brightness_4
code

var Attrdemo = document.getElementById(
    'AtrributeDemo').attributes[1].name;

chevron_right


Output:

onclick

The attributes have a data type of string. So no matter the value of the attribute, it will always return a string.

Example:

document.getElementById('AtrributeDemo').getAttribute('id')

Output:

AttributeDemo

Property: In contrast to the attributes, which are defined in HTML, properties belongs to the DOM. Since DOM is an object in JavaScript, we can get and set properties.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<body>
  
    <p>
        Click the "display" button for
        the number of attributes 
        associated with it.
    </p>
  
    <button id="AttributeDemo" 
        onclick="myFunction()">
        Try it
    </button>
  
    <p id="display"></p>
  
    <script>
        function myFunction() {
  
            // Setting the property 
            // 'geeksforgeeks' to a number
            document.getElementById('AttributeDemo')
                    .geeksforgeeks = 777;
  
            // Getting the property, returns 1 
            var x = document.getElementById(
                'AttributeDemo').geeksforgeeks;
  
            document.getElementById(
                    "display").innerHTML = x;
        }
    </script>
</body>
  
</html>

chevron_right


Output:

Default attributes (non-user-defined) changes when corresponding property changes and vice-versa.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<body>
  
    <p>
        Click the button the display the 
        current className & the edited 
        className
    </p>
      
    <button id="demo1" class="button" 
        onclick="Function1()">
        Click Me
    </button>
      
    <p id="displayCurrent"></p>
    <p id="diplayEdited"></p>
      
    <script>
        function Function1() {
            var div = document.getElementById("demo1");
  
            // Returns  "GeeksForGeeks"
            window.alert("Current Class : " 
                + div.getAttribute("class"));
  
            div.setAttribute("class", "GeeksForGeeks");
  
            // Returns : "GeeksForGeeks"            
            window.alert("Edited Class : " 
                + div.getAttribute("class"));
        }
    </script>
</body>
  
</html>

chevron_right


Output:

Note:

  1. Non-custom attributes (like id, class, etc.) have 1:1 mapping to the properties.
  2. We use ‘className’ to access (get or set) the ‘class’ property because ‘class’ is a reserved keyword in JavaScript.
  3. Attributes which have a defined default value remain constant when the corresponding property changes.

Difference between HTML attributes and DOM properties:

Attribute Property
Attributes are defined by HTML. Properties are defined by the DOM.
Value of an attribute is constant. Value of a property is variable.
These are used to initialize the DOM properties. After initialization, the job is finish. No such job defined.

full-stack-img




My Personal Notes arrow_drop_up

I make software for work & break it for fun Learn more about me www dot preritpathak dot me

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.