【JavaScript】JavaScript in the Browser: DOM

The actual contents comes from The Complete JavaScript Course 2021.

If you have interests, you can check The Complete JavaScript Course by Jonas Schmedtmann.

What is DOM?

It’s structured representation of HTML documents.

Allows JavaScript to access HTML elements and styles to manipulate them.

So we can say DOM is a connection point between HTML documents and JavaScript code.

When does DOM create?

The DOM is automatically created by the browser as soon as the HTML page loads.

And it’s stored in a tree structure like this:

In the tree, each HTML element is one object.

DOM Structure in Detail

For each element in the HTML, there’s one element node in the DOM tree.

And we can access and interact with each of these nodes using JavaScript.

What’s on the top of the DOM?

The DOM starts with the document object, and this object we have access to in JavaScript.

This object serves as an entry point into the DOM.

What’s the first Child Elements of document?

The first child element is the HTML element, it’s the root element in all HTML documents.

What’s two child elements of HTML element?

It’s head and body.

What else does DOM tree have?

It also has nodes for all the text itself, comments and other stuff.

Whatever is in the HTML document also has to be in the DOM.

So the DOM is a complete representation of the HTML document.

The Truth about DOM

DOM is not a part of the JavaScript language.

DOM and DOM methods are part of something called Web APIs.

Web APIs are like libraries that browsers implement and that we can access and use from our JavaScript code.