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.
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 🙄
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:
Element selection using DOM
There are multiple methods for selecting an element using DOM. ou can access elements from following selectors -
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