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

The Complete JavaScript DOM (6 Part Series)

1) JavaScript DOM - Part 1 - What is it and what can we do with it? [video + article] 2) JavaScript DOM - Part 2 - The Document and Window Object [video + article] 3 ... 4 3) JavaScript DOM - Part 3 - Get Element By ID [video + article] 4) JavaScript DOM - Part 4 - innerHTML vs innerText vs textContent [video + article] 5) JavaScript DOM - Part 5 - Get Elements By ClassName [video + article] 6) JavaScript DOM - Part 7 - Query Selectors - Power to Grab anything [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

[deleted user] image

[Deleted User]

The Complete JavaScript DOM (6 Part Series)

1) JavaScript DOM - Part 1 - What is it and what can we do with it? [video + article] 2) JavaScript DOM - Part 2 - The Document and Window Object [video + article] 3 ... 4 3) JavaScript DOM - Part 3 - Get Element By ID [video + article] 4) JavaScript DOM - Part 4 - innerHTML vs innerText vs textContent [video + article] 5) JavaScript DOM - Part 5 - Get Elements By ClassName [video + article] 6) JavaScript DOM - Part 7 - Query Selectors - Power to Grab anything [video + article]

Posted on Jun 10 by:

developertharun profile

Tharun Shiv

@developertharun

Web Developer | DevOps Engineer | Programmer | Course Instructor

Discussion

markdown guide
 
 
 

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.

 

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

 

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

 

Thanks a lot Naveen..!!! πŸ™‚