The Dom Tree(No its not an actual tree)
Cringe jokes aside the DOM is one of the most complicated yet also most enlightening factors of Javascript that when understood and put into practice; makes your entire undertaking in this new language much more easier to understand and get. Just like any new language when it comes to coding there is a logic that is involved that must be learned and put into practice in order to properly get it! The Dom tree is no different. Let’s look at some simple HTML for starters.
Looks crazy right? Unless you started learning the basics of HTML(Hypertext Markup Language)something considered simple like this would give anyone a headache. You need to be able to “read” this HTML properly in order to do be able to get anywhere near Javascript. So let’s break it down a bit more using a DOM tree. Some People find it easier to understand if they can see the actual relationships.
We can now see that html tags are actually connected to both the head and the body but what about whats inside? They break away into other branches! Before we get ahead of ourselves let’s explain what these pretty circles are. These are call nodes or HTML elements. You have to think of them like a family. The html node that starts this whole tree is called the root(they don’t have parents -_-) But the two branches it breaks into which is the head and body are the child nodes of the root. THIS IS IMPORTANT. The root is now the parent node of both the head and the body. But like any family the kids grow and have their own children.Head had two children who he named both Meta and Title(really original XD) who are now sibling nodes! They have the same parent so they are “related”. But wait Title has a child too. But it isn’t and element or attribute, this is called a text node(this is where we usually display or type what our title is or any words we would like to be displayed into our Document!
Knowing this helps in Javascript to use a QuerySelector or ElementFindBy to look for specific nodes to call on when we want to perform logic on these HTML elements! Understanding the DOM Tree is crucial in your adventures for Javascript, but this doesn’t even have CSS(Cascading Style Sheets) which makes everything a bit more crazy! The first step is the most important though!