DOM or Document Object Model is an API (Application programming interface) that defines a logical layout of content & how it’s accessed and manipulated. Using DOM, programmers can build, construct, add, modify, delete, or navigate elements or contents. Everything present on an HTML webpage can be edited using DOM.
How does DOM works?
Following is a diagram of HTML DOM TREE of objects:
There are major four elements of DOM as follows:
• Document: Treats all the HTML documents • Elements: Tags used inside HTML document • Text: Content of tags • Attributes: Here, “href” is an attribute
The moment we load an HTML document, DOM designs it in a representational tree. Following is a representation of DOM & HTML document.
• Cookie: Returns value pairs of cookies in the document • documentMode: Returns mode of rendering used by the browser • domain: Returns the domain name • lastModified: Returns date & time of last modification • title: Returns the title of the document • URL: Returns entire URL of the document
While manipulating HTML documents we need to first find elements. There are few ways to do so:
• By ID:
Suppose id =’intro’, example:
var myElement = document.getElementById(“Intro”);
• By TagName:
Suppose tag=’hello’, example:
var buttons = document.getElementByTagName(‘hello’);
• By ClassName:
var myElement = document.getElementByClassName(‘stock’);
• By CSS Selectors:
var resetElement = document.querySelector(‘#reset’);
• By querySelectorAll():
var myElements = document.querySelector(‘#elements’);
The tree starts with a document as the “root” & then subcategories are HTML elements. This system & abstraction method helps you to access any HTML element, style sheet, etc. easily. DOM is a set of objects or elements in a hierarchical structure with an interface to access them.
There are few more elements like link, area, image, applet, and anchor in DOM. However, the major ones are covered. So this was a short meaning of DOM & how it works with elements. That’s all!