DEV Community

Cover image for JavaScript DOM - Part 1 - What is it and what can we do with it? [video + article]
Tharun Shiv
Tharun Shiv

Posted on • Updated on

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

DOM Tree

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.

Read Part 2 here


Written by,

Thank you for reading, This is Tharun Shiv a.k.a Developer Tharun

Tharun Shiv

Top comments (9)

Collapse
 
chandrika56 profile image
Jaya chandrika reddy

Good.. keep going!

Collapse
 
developertharun profile image
Tharun Shiv

Thanks.. 😊

Collapse
 
harshpyati0798 profile image
Harsh Pyati

Great content.. looking forward to know more about Point 2 and Point 5.
If I may ask will you be writing about event bubbling and capturing? That would be amazing.

Collapse
 
developertharun profile image
Tharun Shiv

Thanks a lot! Yes, I would be writing about event bubbling, how to stop propagation also.
Thanks for the suggestion 😊

Collapse
 
venkat121998 profile image
venkat anirudh

Good start to the series...

Collapse
 
developertharun profile image
Tharun Shiv

Thank you 😊

Collapse
 
naveen profile image
Naveen

Good work and initiative Tharun , short and concise article and video to start with. Keep it coming!

Collapse
 
developertharun profile image
Tharun Shiv

Thanks a lot Naveen..!!! 🙂

Collapse
 
alighasemi889 profile image
founder of codemaster

Really great and mentioned very well