Attributes versus Properties in JavaScript blog post

Attributes versus Properties in JavaScript

Todd Motto

8 Oct, 2019

JavaScript

5 minutes read

In the HTML we write, we declare elements and pass values into attributes. In JavaScript, specifically in the DOM, we have properties available when querying HTML elements via the DOM.

"How do properties relate to HTML attributes?" In this article, we’re going to answer questions like this as well as others like "What is the DOM?" and "How is an attribute different to a property?".

After reading this article, you’ll be primed with new knowledge on the DOM, HTML attributes and JavaScript DOM properties – as the two can be very similar yet different.

Let’s investigate the difference between Attributes and Properties.

What is the DOM?

In web applications we write, we have HTML. Once a browser requests your HTML page, it’s time for the DOM to spring into life!

Once you've finished reading this post, do you want to learn even more?

javascript

Learn JavaScript for FREE!

We've created the best online course for you to fully master JavaScript using real-world examples and techniques you’ll find nowhere else.

  • ES2015 and beyond
  • Variables and Scoping
  • Strings, Numbers and Booleans
  • Conditional Statements
  • Operators
  • Modules
  • Arrays and Objects
  • Functions and Closures
  • Loops and Iteration
Get course Get javascript Basics

Deep inside your browser, when a page is rendering, the DOM (Document Object Model) is created from the HTML source code that’s being parsed.

HTML is a structural language, and that structure (in short) gets mapped across to a JavaScript representation of that source code – ultimately giving us "the DOM".

HTML is a tree structure, we deal with parent and child elements, so naturally the DOM is a JavaScript object following a similar structure.

For example, HTML such as <body id="ultimate"> would be composed into a DOM object which we could access via document.body.id.

If you’ve done something like this, you’ve already used the DOM:

// returns a DOM Node object
document.querySelector('input');

The DOM gives us the ability to talk to different parts of our HTML structure, update them, create them, delete them – you name it. As the DOM is just a JavaScript object, all we need is knowledge of JavaScript to get started.

When our JavaScript code is executed by a browser, the DOM is ‘supplied’ to us from the environment we are running in, i.e. the ‘web’ environment. In a Node.js environment there is no DOM and therefore references to things like document will not work.

JavaScript is the programming language, the DOM is an API exposed to us in the global scope, via the browser, for us to interact with.

With this in mind, we know how to write HTML and declare attributes. And we know how to query our HTML via the DOM in JavaScript. That is the succinct difference, and is just the beginning, as there is lots more to learn about attributes and properties – let’s continue.

Attributes versus Properties

In HTML there are attributes. In JavaScript DOM, we can talk to and update these attributes through properties (and even method calls) that exist on elements, known as DOM nodes, when we make a query. Let’s explore an attribute and then we’ll come onto properties.

An attribute could be something like value, for example with this piece of HTML:

<input type="text" value="0">

When the above HTML is parsed and rendered, the attribute’s value will be '0' and of type string, not number. What we’re interested in is the property. A property gives us access via JavaScript to read and write different values. Welcome to the DOM!

In plain JavaScript let’s query our input element:

const input = document.querySelector('input');

console.log(input.value); // '0'

When we access input.value, we are talking to the property and not the attribute.

Now, if we want to update our value, we use the property:

const input = document.querySelector('input');

// update the value property
input.value = 66;

// read the current value property
console.log(input.value); // '66'

Access and give this example code a try here.

This updates the DOM, our JavaScript model, and does not update the HTML. If we Inspect Element, we’d see value="0" – yet the actual DOM value is 66. This is because updating a property does not necessarily update an attribute, and this is a common gotcha for JavaScript developers of all skill levels.

If we wanted to actually update the HTML element’s attribute, we can do this via the setAttribute method:

const input = document.querySelector('input');

// update the value attribute
input.setAttribute('value', 99);

// read the current value property
console.log(input.value); // '99'

Access and give this example code a try here.

The interesting thing here is our HTML would update from the setAttribute method call, giving us an accurate reflection when we Inspect Element – however it also updates the DOM property too! Which is why input.value is 99 when logged out.

Why the two? The DOM is a JavaScript model, so we don’t need to keep updating the HTML attributes, it could actually be a resource waste. If we only need to use the DOM, we should do so and not store state inside the HTML as well. The DOM is optimized and fast, so using something like value over setAttribute makes much more sense.

About the author

Todd Motto profile picture

Todd Motto

GDE Google Developer Expert

Todd is the Founder of Ultimate Courses. With a passion for Angular, TypeScript and JavaScript, Todd leads the online courses creation and has written hundreds of articles on front-end web development and beyond. He specialises in breaking down complex topics and understands the critical mission of learning new technology fast, comprehensively and the right way.

Leave a Reply

Love the post? Share it!

Lots of time and effort go into all our blogs, resources and demos,
we'd love it if you'd spare a moment to share them!

Explore our JavaScript courses

Get started today and join over 60,000 developers.