An Interest In:
Web News this Week
- April 19, 2024
- April 18, 2024
- April 17, 2024
- April 16, 2024
- April 15, 2024
- April 14, 2024
- April 13, 2024
Beginner JavaScript - 11 - Document Object Model & Query Selection
Hey everyone ,
In this article, let us cover a detailed introduction on Document Object Model (DOM) in JavaScript. This is the eleventh part of my Beginner JavaScript Series on Dev.
Document Object Model - A complete picture
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.
Let's dive a bit DEEPER
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 Elements in DOM
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.
1. getElementsByTagName
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 elementsconst elements = document.getElementsByTagName('h1');
2. getElementsByClassName
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 gameconst games = document.getElementsByClassName('game');
3. getElementById
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');
4. querySelector
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');
5. querySelectorAll
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 :
(2021) - Web Developer Full Course : HTML, CSS, JavaScript, Node.js and MongoDB
The Nerdy Dev Apr 28 2 min read
Looking to learn React.js with one Full Project, check this out :
Learn React with one BIG Project [NOTES included] - Demo and Video Link
The Nerdy Dev Jun 10 1 min read
Follow me on Twitter : https://twitter.com/The_Nerdy_Dev
Check out my YouTube Channel : https://youtube.com/thenerdydev
Original Link: https://dev.to/thenerdydev/beginner-javascript-11-document-object-model-query-selection-10fp
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To