JavaScript - HTML Attributes and DOM Properties - How Are They Different?

In review, the DOM (Document Object Model) is created from the parsed HTML source code when a page is rendering inside your browser. HTML is a language structured like a tree with parent elements and child elements. These elements are mapped over to a representation of JavaScript code that provides us with the DOM.

The DOM is simply a JavaScript object, but it allows us to talk to various parts of the HTML structure. It allows us to update, create, delete, or whatever we need to do to the HTML code. However, it is important to understand that JavaScript is executed by the browser, but the DOM is supplied by the web environment. Therefore, if we were using Node.js, for example, there would be no DOM. JavaScript is a language. DOM is an Application Programming Interface (API) open to us on a global scope through the browser, which allows us to interact with it.

Attributes and Properties

HTML attributes modify the element's behavior. When you give attributes, you are giving direction or characteristics to the functionality of your HTML element types. When you define the HTML elements of a website, you can set the HTML attributes for those elements.

<input value="0">

When describing the DOM node, since it is an object, it has properties. So, its value, for example, is a property.

input.value = 0