Understanding HTML DOM

DOM 📃

Document Object Model is an interface for HTML and XML documents.

It represents a page such that programs can change the structure, style and content.

DOM defines methods to access and manipulate the structure of web page.

It's through DOM that programming languages such JavaScript interact with a page.

Think of DOM as a web api used to build websites.

This api is independent of any programming language.

That mean's you don't have to know JavaScript to use DOM.

NB: in this article we will only use JavaScript to learn how you interact with DOM.

Documents are represented as tree structure in which each node is an object with properties and methods access and manipulate the structure, content or style of the page.

Core objects mostly used to interact with a page include:

🟨document - represents the root of the document itself

Tip💡: to see the document object type the following in the console of your browser

console.log(document);

🟨 window - represents something like the browser

Tip 💡: to print the window object with all it's method and properties(type the following in the console of your browser)

console.log(window);

You'll find yourself using most of these two objects' method and properties time and again;

so take time enough to read more and understand them them.

Find examples on how to use these object to interact with a web page here 👇

Examples on how to use DOM API

This marks the end of this article.

Thank you for reading through to the end.