What is the DOM in JavaScript? A Comprehensive Guide

• The HTML DOM is an accepted guideline for how to access, update, add or remove HTML elements.
• A Structure representation of an HTML document is provided by DOM.
• An HTML document is completely built using objects. DOM represents it in an objected-oriented way which can be manipulated using scripting languages like javascript.
• All the objects in the HTML document are hierarchically connected to one another. The document object forms the root of all objects.

DOM can do many things

• JavaScript can change all the HTML elements in the page
• JavaScript can change all the HTML attributes in the page
• JavaScript can change all the CSS styles in the page
• JavaScript can remove existing HTML elements and attributes
• JavaScript can add new HTML elements and attributes
• JavaScript can react to all existing HTML events in the page
• JavaScript can create new HTML events in the page

Example: Script file

let val;
val = document;
val = document.all
val = document.all[2]
val = document.length;
val = document.head;
val = document.body;
val = document.doctype;
val = document.domain;
val = document.URL;
val = document.characterSet;
val = document.contentType;

// we can access forms

val = document.forms;
val = document.forms[0];
val = document.forms[0].id;
val = document.forms[0].method;
val = document.forms[0].action;
 

// we can access links

val = document.links;
val = document.links[0];
val = document.links[0].id;
val = document.links[0].className;
val = document.links[0].classList;
val = document.links[0].classList[0];
 

// we can access  images

val = document.images; 

//  we can access scripts

val = document.scripts; 
val = document.scripts[2];
val = document.scripts[2].getAttribute('src');