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

<span class="pln">
</span><span class="kwd">let</span><span class="pln"> val</span><span class="pun">;</span><span class="pln">
val </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">;</span><span class="pln">
val </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">all
val </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">all</span><span class="pun">[</span><span class="lit">2</span><span class="pun">]</span><span class="pln">
val </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">length</span><span class="pun">;</span><span class="pln">
val </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">head</span><span class="pun">;</span><span class="pln">
val </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">body</span><span class="pun">;</span><span class="pln">
val </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">doctype</span><span class="pun">;</span><span class="pln">
val </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">domain</span><span class="pun">;</span><span class="pln">
val </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">URL</span><span class="pun">;</span><span class="pln">
val </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">characterSet</span><span class="pun">;</span><span class="pln">
val </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">contentType</span><span class="pun">;</span><span class="pln">


</span>

<span class="pln">
</span><span class="com">// we can access forms</span><span class="pln">

val </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">forms</span><span class="pun">;</span><span class="pln">
val </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">forms</span><span class="pun">[</span><span class="lit">0</span><span class="pun">];</span><span class="pln">
val </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">forms</span><span class="pun">[</span><span class="lit">0</span><span class="pun">].</span><span class="pln">id</span><span class="pun">;</span><span class="pln">
val </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">forms</span><span class="pun">[</span><span class="lit">0</span><span class="pun">].</span><span class="pln">method</span><span class="pun">;</span><span class="pln">
val </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">forms</span><span class="pun">[</span><span class="lit">0</span><span class="pun">].</span><span class="pln">action</span><span class="pun">;</span><span class="pln">
 </span>

<span class="pln">
</span><span class="com">// we can access links</span><span class="pln">

val </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">links</span><span class="pun">;</span><span class="pln">
val </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">links</span><span class="pun">[</span><span class="lit">0</span><span class="pun">];</span><span class="pln">
val </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">links</span><span class="pun">[</span><span class="lit">0</span><span class="pun">].</span><span class="pln">id</span><span class="pun">;</span><span class="pln">
val </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">links</span><span class="pun">[</span><span class="lit">0</span><span class="pun">].</span><span class="pln">className</span><span class="pun">;</span><span class="pln">
val </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">links</span><span class="pun">[</span><span class="lit">0</span><span class="pun">].</span><span class="pln">classList</span><span class="pun">;</span><span class="pln">
val </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">links</span><span class="pun">[</span><span class="lit">0</span><span class="pun">].</span><span class="pln">classList</span><span class="pun">[</span><span class="lit">0</span><span class="pun">];</span><span class="pln">
 </span>

<span class="pln">
</span><span class="com">// we can access  images</span><span class="pln">

val </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">images</span><span class="pun">;</span><span class="pln"> 
</span>

<span class="pln">
</span><span class="com">//  we can access scripts</span><span class="pln">

val </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">scripts</span><span class="pun">;</span><span class="pln"> 
val </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">scripts</span><span class="pun">[</span><span class="lit">2</span><span class="pun">];</span><span class="pln">
val </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">scripts</span><span class="pun">[</span><span class="lit">2</span><span class="pun">].</span><span class="pln">getAttribute</span><span class="pun">(</span><span class="str">'src'</span><span class="pun">);</span>