HTML attributes vs DOM properties

When you load a web page in your browser, it creates a Document Object Model (DOM) tree that shows how the HTML code is structured. It does this by reading the HTML attributes and turning them into DOM nodes.

Each HTML element is like a puzzle piece that fits into the DOM tree as a DOM node. The attributes of the HTML element become properties of that node. For example, if you have an image on your web page with `src` and `alt` attributes, the browser creates a corresponding `HTMLImageElement` node in the DOM tree with `src` and `alt` properties set to the values you specified in your HTML code.

Sometimes people use the terms "HTML attributes" and "DOM properties" interchangeably, but they actually mean different things. HTML attributes are the values you specify in your HTML code, while DOM properties are the values that get assigned to an element through scripting. In other words, HTML attributes define the starting point of an element, while DOM properties show its current state.

In this post, we'll explore the differences between the two and learn why it matters.

Have you ever wondered about the connection between HTML attributes and DOM properties? In most cases, they share the same name. But there are some special cases where the attributes are reversed when using JavaScript.

For example:

It's important to note that not all HTML attributes have corresponding properties in the DOM tree. Some attributes are used only for styling or other purposes that do not affect the behavior of an element. Others are deprecated or obsolete.

Take the `data-*` attribute, for instance. This attribute is used to store custom data that is private to the page or application. The values of these attributes can be accessed through the `dataset` property of the element. For example, if an element has a `data-id` attribute with the value `"123"`, you can access it in JavaScript using `element.dataset.id`. This allows developers to add custom metadata to elements without affecting their behavior or appearance.

On the other hand, some DOM properties don't have corresponding attributes. One example is the `textContent` property, which represents the text content of an element. While you can use it to get or set the text content of an element, including any nested elements, there is no HTML attribute that corresponds to this property. Therefore, you cannot set the text content of an element using an HTML attribute. Instead, you would need to use JavaScript to manipulate the `textContent` property directly.

It's important to note that changes made to HTML attributes or DOM properties don't always affect each other. For example, modifying an HTML attribute doesn't necessarily update its corresponding DOM property, and vice versa.

Let's say you have an HTML input element that looks like this:

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

When the browser displays this input box, it creates a corresponding DOM node with a `value` property that's set to "Foo". Now, if the user enters "Bar" into the input box, the DOM `value` property changes to "Bar" accordingly.

Here's the interesting part: even though the DOM `value` property has changed, the HTML `value` attribute remains the same. You can confirm this by asking the input element about its `value` attribute using the `input.getAttribute('value')` method, which will return "Foo".

In most cases, it's recommended to use DOM manipulation instead of modifying HTML attributes directly because it offers more flexibility and control over how elements are updated on a webpage.

Event handling is a crucial part of web development. It allows us to specify what should happen when users interact with our web pages. There are two ways to handle events: using HTML attributes or DOM properties.

Let's start with HTML attributes. You can use the `onclick` attribute to specify a click event handler for a button element. For example:

<button onclick="alert('Button clicked!')">Click me</button>

In this example, we add an `onclick` attribute to a button element. When the button is clicked, the browser executes the JavaScript code specified in the `onclick` attribute, which displays an alert dialog with the message "Button clicked!".

However, using HTML attributes for event handling has some disadvantages. If multiple elements share the same event handler, it can lead to code duplication. Plus, it can make the code harder to read and maintain because it mixes presentation and behavior concerns. Finally, it may not work correctly when dynamic changes need to be made to the event handlers.

On the other hand, using DOM properties for event handling allows developers to separate presentation from behavior concerns and provides more flexibility in handling events dynamically. This approach also makes it easier to reuse code because multiple elements can share the same event handler function.

To use DOM properties for event handling, you need to add an event listener function to an element's `addEventListener` method. This method takes two arguments: the type of the event (e.g., "click") and the callback function that will be executed when the event occurs. For example:

const button = document.querySelector("#button");
const handleClick = () => {
    console.log("Button clicked!");
};

button.addEventListener("click", handleClick);

In this example, we add a click event listener to a button element with id "button". When the button is clicked, the callback function logs a message to the console.

In summary, while HTML attributes can be used for event handling in simpler cases, using DOM properties provides greater flexibility and separation of concerns for more complex applications.