DEV Community

Terry Threatt
Terry Threatt

Posted on • Edited on

5 1

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'

Enter fullscreen mode Exit fullscreen mode

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.
Enter fullscreen mode Exit fullscreen mode

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

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

Top comments (0)

Cloudinary image

Zoom pan, gen fill, restore, overlay, upscale, crop, resize...

Chain advanced transformations through a set of image and video APIs while optimizing assets by 90%.

Explore

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay