What is the DOM in Javascript?

Rumman Ansari   Software Engineer   2023-03-26   5905 Share
☰ Table of Contents

Table of Content:

  • 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');
‹ Previous not possible this is first one.
Next › -   DOM Selectors for Single Elements