JavaScript DOM - Part 1 - What is it and what can we do with it? [video article]

This is going to be a multi part Video + article tutorial series on JavaScript DOM. You're reading Part 1

Intro

Those of us who do not know Web Development, have always wondered how the website responds to you instantly. Gone are those days where you just had static web pages and the days where the page has to actually reload completely to show any change in them.
JavaScript DOM is like the basic knowledge that any web developer should have. Irrespective of whether you're gonna apply them directly or not.

What is JavaScript DOM?

Before we answer this, you need to know what DOM is. DOM stands for Document Object Model. So when a browser loads a webpage, the entire HTML content of the webpage is made into a tree-like structure consisting of nodes. The structure of the tree depends on the HTML code itself. So JavaScript DOM is where we use JavaScript to access and modify the DOM.

So this is how the DOM Tree would look like for the example HTML Code

What can we do with the DOM?

1. Change or Remove the elements from the DOM
2. Change or Add CSS properties to the elements
3. Read or change the element attributes like src, alt, href
4. Attach event listeners to the elements and make them respond to events
5. Create a new element and insert it anywhere

We will learn more about each one of these in this series.

Part 2 coming tomorrow...

Written by

.ltag__user__id__378811 .follow-action-button { background-color: #1E90FF !important; color: #fdf9f3 !important; border-color: #1E90FF !important; }

Tharun Shiv

Web Developer | DevOps Engineer | Programmer | Course Instructor

tharunShiv https://tharunshiv.com