DOM Manipulation

What is DOM in JavaScript?

JavaScript can access all the elements in a webpage making use of Document Object Model (DOM). In fact, the web browser creates a DOM of the webpage when the page is loaded. The DOM model is created as a tree of objects like this:

How to use DOM and Events

Using DOM, JavaScript can perform multiple tasks. It can create new elements and attributes, change the existing elements and attributes and even remove existing elements and attributes. JavaScript can also react to existing events and create new events in the page. getElementById, innerHTML Example getElementById: To access elements and attributes whose id is set. innerHTML: To access the content of an element. As you can see from the below example after the button is pressed which is basically a click event the styling as well as the text content of the paragraph changes.

Before Pressing The Button

After Pressing The Button

Code