DOM stands for Document Object Model. To understand DOM, lets first see what is Document object.
The Document Object represents how the HTML document is displayed in the window. Therefore, the way in which this document is accessed and modified is called the Document Object Model.
We all know that JavaScript is used to add behavior and interactivity to the web page. It is also possible to manipulate the web page using javascript.
When a page is loaded, the browser creates the DOM for the web page. The DOM represents the document as a node tree, where each node represents part of the document. It can be an element, text, etc., just how that web page was actually written.
As we can see the image shown in the cover. The DOM represents a document with a logical tree. The tree is a hierarchical structure, in a sense that we have tags inside tags in HTML. everything in HTML can be represented as nodes. Document node represents whole document. For example, in DOM tag is root node, then and tags are it’s children. Like this we have tags inside both and tags as their children. Each branch of the tree ends in a node, and each node contains objects. DOM methods allow programmatic access to the tree; with them, you can change the document's structure, style, or content. Event listeners can be added to nodes and triggered on an occurrence of a given event.
What is DOM manipulation then 🙄
In DOM manipulation we are using javascript to make changes to a web-page, with respect to the user interaction. Ex: enabling dark mode, or changing the background of the color.
The DOM is simply an object from which we can make methods and properties to make those modifications to the page.
Open the developer tool and click on console then type the following:
Here we can see the document as a actual javascript object rather than the representation of the HTML page.
Thus in summary: DOM is nothing but a JavaScript object that represents the document (web page). It provides a set of tools for the developer to use to manipulate the web page. Document Object Model is an API that represents and interacts with HTML document.
Element selection using DOM
There are multiple methods for selecting an element using DOM. ou can access elements from following selectors -
- document.getElementById
- document.getElementsByTagName
- document.getElementsByClassName
- document.querySelectorAll
- document.querySelector
Selecting single element form page ==> This returns an object.
Selecting multiple elements from page ==> which returns array of objects.
- getElementById: The id elements are unique. No two elements should have the same id. Neglecting this will cause inconsistency. Ex: document.getElementById("come") ==> here come is the name of the element id.
Sometimes you may want to select a number of elements. This can be done by: ClassName, TagName,QuerySelector, QuerySelectorAll