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?
- Change or Remove the elements from the DOM
- Change or Add CSS properties to the elements
- Read or change the element attributes like src, alt, href
- Attach event listeners to the elements and make them respond to events
- Create a new element and insert it anywhere
We will learn more about each one of these in this series.
Read Part 2 here
Article No Longer Available
Written by,
Top comments (9)
Good.. keep going!
Thanks.. 😊
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 start to the series...
Thank you 😊
Good work and initiative Tharun , short and concise article and video to start with. Keep it coming!
Thanks a lot Naveen..!!! 🙂
Really great and mentioned very well