The DOM Tree

Any HTML document that is comprised from HTML elements has a specific hierarchy. By keeping it's mind to this hierarchy (think it like a tree) the browser knows which element is inside which other element, what properties the child element inherits from the parent element and many many more. All this information helps and defines the strategy, that the browser in the end is going to use in order to render the page and every single element individually correctly.

In reality the whole HTML document is a JavaScript object that holds information about every element individually, but also about the relationship and the connection between these HTML elements.

The Document Object Model explained

These elements on their side, hold their own properties (HTML attributes and more) that define their appearance and behavior in the page. These properties can be grabbed and altered by JavaScript on the fly. After an event has occurred for example.

The first thing we need to learn, in order to make changes on HTML elements on the fly, is to learn how to select them. By group or individually.