Introduction

The basic HTML and CSS teaches you to build static web pages. What I mean by static is, any change requires reloading the whole page. Developers would have to sit and wait all day to handle user interactions and update content on the fly- which is manually impossible. To create these dynamic experiences smoothly, the DOM was introduced.

What is DOM?

DOM stands for document object model. It was introduced as a structured representation of the HTML document. HTML elements are constructed as a tree of Objects in HTML DOM. In the DOM, all HTML elements are defined as objects. Using JavaScript we can create, delete or update these DOM elements in real-time, basically adding interactivity.

HTML DOM tree of objects in visual graph

DOM Document

Think of HTML DOM document as the big object- the owner of all other objects in your web page. As he’s the owner, you need to go through him to get to his other owned objects. In other words, before accessing any other object, you access the document object first. Now, how do you access or manipulate objects/elements of your HTML web page?

document.getElementById(id)  //find an element by element id.
element.innerHTML =  new html content  //change the inner HTML.
document.createElement(element)  //create new element.
document.removeChild(element)  //delete an element.
document.appendChild(element)  //add an element.

DOM Methods and Properties

DOM methods are actions, and DOM properties are values. Think of the DOM as a human body:

  • Elements are like body parts. (e.g., hands)

  • Properties describe them. (hand.color = brown)

  • Methods signify actions. (hand.move)

element.innerText //is a property.
element.setAttribute() //is a method.

Properties describe, methods do.

Events and EventListeners

HTML events are occurrences that a web page can respond to. Events are like your web page saying "Hey, I got touched!" and event listeners are JavaScript's way of saying "I got this." It's liking teaching your web page stimuli and the responses to it.
The addEventListener() method attaches an event handler to the specified element.
Syntax:
element.addEventListener(event, function, useCapture);

Well, I guess that's enough as my introductory blog sharing about my learnings, I'll be back soon!

Follow me on X: sxryadipta0x