What's the difference between attributes and properties?

An attribute is the additional information defined in an HTML element to be initialized upon creation. A property is a characteristic of a DOM node(object) that you can manipulate.

As I started to learn web development I discovered these two terms that appear to mean the same exact thing. In fact, some HTML element attributes and DOM node properties have 1 to 1 mappings that represent the same thing.

// HTML Element
<input type='text' value='name' id="signup">

// DOM Node
let inputValue = document.getElementById('signup').value

#=> The value in both cases return 'name'

So what is the big difference? In the creation, HTML attributes will determine the initial qualities of the object. With the help of the DOM API and javascript, the HTML is parsed in turned into an object that we can work with. Objects have properties that we can manipulate to change the look, feel, and behavior of our applications.

<p id="example">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque luctus tortor quam, sed consectetur odio tempus ac. Maecenas fermentum vestibulum pulvinar. Aenean ex tellus, dictum ac accumsan ut, accumsan nec lectus. Donec semper feugiat blandit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam pulvinar enim nec ante hendrerit, eu posuere enim placerat. Maecenas lorem velit, posuere in commodo at, laoreet vitae turpis. Nunc libero orci, venenatis at maximus eu, pharetra nec erat. Aliquam a convallis ex, congue fringilla arcu.</p

let para = document.getElementById("example");
para.style.color = "blue"

#=> This will change the color of the text through the style property.

I hope this helps you understand more about the differences between attributes and properties. If you enjoyed this explanation, feel free to comment below or follow me for more blog posts.

Terry Threatt