JavaScript DOM

Hi all good morning. Today I am going to give a short explanation on the DOM element in HTML which helps JavaScript to access the elements of HTML page and modify,delete,etc dynamically.
First of all what is a DOM🤔? The answer to that is here:
The DOM is a W3C (World Wide Web Consortium) standard.

The DOM defines a standard for accessing documents:

"The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."

The above is the official definition of a DOM. In other words a HTML DOM is a standard for how to change , access , add or delete HTML elements.

With the object model, JavaScript gets all the power it needs to create dynamic HTML:

• JavaScript can change all the HTML elements in the page.
• JavaScript can change all the HTML attributes in the page.
• JavaScript can change all the CSS styles in the page.
• JavaScript can remove existing HTML elements and attributes.
• JavaScript can add new HTML elements and attributes.
• JavaScript can react to all existing HTML events in the page.
• JavaScript can create new HTML events in the page.

In the DOM tree the entire content present in the HTML page is broken up into nodes and each node represents a particular element of the page.

We can perform the above actions using the following commands:

- Select elements: document.querySelector('h1')
- Change content: element.textContent = "Hello!"
- Modify styles: element.style.color = "blue"
- Handle events: element.addEventListener('click', ...)
- Create/remove elements: document.createElement('div'), element.remove()

Apart from the above uses, the DOM is a very important part of web development because it helps major frameworks like React , Vue and Angular to handle elements in real time.

So that's all about DOM.....hope this post has been useful. See you all in the next post.

Reference: w3schools.com