Day 14: Document Object Model

What Is The DOM?

The Document Object Model is essentially a Javascript representation of our HTML page. The browser creates the DOM as it reads the HTML, this allows us to interact with our HTML elements by using Javascript. The DOM is our bridge into HTML and CSS from Javascript, allowing us to connect all three of these web languages.

Just imagine Javascript on the left & HTML and CSS on the right. The DOM is the bridge 🌉.

Using DOM

We can use the DOM to select our HTML elements by using certain methods available on the document object. One of the most common selectors is the query selector which will grab a specified element, the element can be selected by type, class, or id. Once we have the selected element or elements we can change the element's text, style, classes, attributes, and more. Being able to modify elements with Javascript allows us to create dynamic websites that users can interact with. The DOM gives us this power!

Using the DOM API.

Closing

That wraps up week 3! Starting to dive into some more advanced topics, and I’m excited to learn more ✌️.