JavaScript DOM

Introduction

JavaScript DOM(Document Object Model) is essential part of web development. DOM is a platform that allows programs and script to dynamically access and content , style and structure of a document.
There are three different parts of DOM -
a. Core DOM - Document type
b. XML DOM - XML Documents
c. HTML DOM - HTML documents
In these case we will discuss about HTML DOM.

1) document.getElementById:
Select element using get element by Id .

2) document.querySelector :
select element using query selector.

3) document.getElementByTagName:
Select element by tag name .

4) document.getElementByClassName:
Get multiple elements using getElements by class name.

5) document.querySelectorAll:
Get multiple elements items using querySelectorAll.

Event listeners in DOM

The addEventListener() method allows you to add event listeners on any HTML DOM object such as HTML elements, the HTML document, the window object.

1. click event ()

The onclick event occurs when the user clicks on an element.

addEventListener() method, the JavaScript is separated from the HTML markup, for better readability and allows you to add event listeners even when you do not control the HTML markup.

when user click on change color button the body background will automatically change and the color of text will change also.

Example: