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

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

developertharun profile image Tharun Shiv Updated on ・2 min read

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

[deleted user] image

[Deleted User]

Discussion

pic
Editor guide
Collapse
chandrika56 profile image
Jaya chandrika reddy

Good.. keep going!

Collapse
developertharun profile image
Tharun Shiv Author

Thanks.. 😊

Collapse
venkat121998 profile image
venkat anirudh

Good start to the series...

Collapse
developertharun profile image
Tharun Shiv Author

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 Author

Thanks a lot Naveen..!!! 🙂

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 Author

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