Hey everyone 👋🏻,
Document Object Model, or DOM for short is a programming API for HTML and XML documents. It defines the logical structure of documents and the way a document is accessed and manipulated. So in essence, it is a visual representation of a hierarchical structure of all of the objects and properties that are contained in a web document.
To understand the big picture of the Document Object Model. We need to understand that when our browser first loads an HTML page, it first maps it to a visual representation. So it basically parses over the HTML code that you and I write, creates a visual hierarchical representation of it which is called as the DOM. Each element that we define in our HTML template maps to some DOM object that is part of this DOM structure that we are talking about.
So the HTML DOM that gets produced by the browser, constructs a tree-like structure that consists of all your HTML page element as DOM objects.
For instance, assume that the below HTML code gets loaded in the browser.
<!DOCTYPE html> <html> <head> <title>This is some HTML page</title> </head> <body> <p class="element-one">I am a paragraph</p> <h1>I am an important element </h1> </body> </html>
Querying for Elements in the DOM can be used using DOM Selectors. So let us understand 5 ways using which you can select elements in a DOM using selectors.
The getElementsByTagName method returns us an HTMLCollection of elements with the given tag name. Here the complete document is searched, including the root node until we find all the elements that contain a certain tag name that is passed to this method as an argument. The interesting thing about using the getElementsByTagName method is that the returned HTMLCollection is live, meaning that it updates itself automatically to stay in sync with the DOM tree without having to call the same method again.
// As an example, let us say we are looking for all the h1 elements const elements = document.getElementsByTagName('h1');
The getElementsByClassName method returns a live HTMLCollection of elements which have a particular class on them that we are looking for. When called on the document object, the complete document is searched, including the root node.
// As an example, let us say we are looking for an element with the class of game const games = document.getElementsByClassName('game');
The getElementById returns an element object whose id attribute matches with the id that we are looking. Since element IDs, as we know, are required to be unique if specified, they're a useful way to get access to a specific element quickly.
// As an example, let us say we are looking for an element with id of username. Each HTML page can only have one such element that has the id that we are looking for. const username = document.getElementById('username');
The querySelector returns us the first element within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned.
// As an example, let us say we are looking for an element with id of username. Each HTML page can only have one such element that has the id that we are looking for. const username = document.querySelector('#username');
The querySelectorAll method returns a static, NOT live NodeList representing a list of all the elements that we have in the document that match the specified group of selectors.
// As an example, let us say we are looking all elements that have the class of user on it. const users = document.querySelectorAll('.user'); // Static Non-Live Node List
So this is it for this one. I do have a video on Introduction to Document Object Model and Query Selection as well. So make sure to check them out if that interests you :
If you are looking to learn Web Development, I have curated a FREE course for you on my YouTube Channel, check the below article :
Looking to learn React.js with one Full Project, check this out :
👉🏻 Follow me on Twitter : https://twitter.com/The_Nerdy_Dev
👉🏻 Check out my YouTube Channel : https://youtube.com/thenerdydev