DEV Community

Anik Saha
Anik Saha

Posted on

2

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 .

Image description

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

Image description

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

Image description

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

Image description

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

Image description

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.

Image description

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.

Image description

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

Example:

Image description

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (0)

SurveyJS custom survey software

JavaScript Form Builder UI Component

Generate dynamic JSON-driven forms directly in your JavaScript app (Angular, React, Vue.js, jQuery) with a fully customizable drag-and-drop form builder. Easily integrate with any backend system and retain full ownership over your data, with no user or form submission limits.

Learn more