It is stands for Document Object Model. The DOM is a cross-platform and language-independent convention for representing and interacting with object in HTML, XHTML and XML document. The nodes of every document are organised in a tree structure called the DOM tree. Object in the DOM tree may be address and manipulated by using methods on the objects. The public interface of DOM is specified in its API (application programming interface).

Home Page - Basic Engineer
Home Page – Basic Engineer

History Of DOM

The history of the Document object Model is intertwines with the history of the “browser wars” of the late 1990s between Netscape navigator and Microsoft Internet Explorer, as well as with that JavaScripts and JScripts, the first Scripting language to be widely implement in the layout engines of web browsers.

DOM Tree

DOM tree refers to the HTML pages where all the nodes are object.

There are three main types of DOM tree

  • text nodes
  • element nodes
  • comment nodes

Auto correction

If an erroneous HTML is encounter by the browser, it tends to correct it.


if we put something after the body, if is automatically move inside the body. <table> tag which must contain <tbody>.

DOM Tree
DOM Tree

Note : document.body can sometime be null if the javascript is written before the body tag.

Children of an element

Direct as well as deeply nested element of an element are called children.

Child nodes :- Elements that are direct children.

Child-Nodes looks like an array. But its not Actually an array but a collection. We can use array collection to convert it into an Array.

DOM Collection

  • They are read-only.
  • They are Iterable using for loop

Table link

certain DOM element may provide additional properties specific to their type for convenience.

Table element Properties

table.rowCollection of tr element.
table.captionreference of <caption>
table.tHeadreference of <thead>
table.tFootreference of <tfoot>
table.tBodyCollection of <tbody> element
tbody.rowsCollection of <tr> inside
tr.cellsCollection of <td> and <th>
tr.sectionRowIndexIndex of <tr> inside enclosing element
tr.rowIndexRow number starting from 0
td.cellIndexno of cells inside enclosing<tr>

Searching The Dom

Dom navigation properties are helpful when the element are not close to each other, we have some more methods to search the DOM.

  • document.getElementById()
    • This method is use to get element with a given “id” attribute.
  • getElementsByClassName()
    • This method is use to return element that have the the given CSS
  • getElementsByName()
    • This method is use to the searches element by the name attribute.
  • getElementsByTagName()
    • This method is use to the return element with the given tag name

If you have any queries regarding this article or if I have missed something on this topic, please feel free to add in the comment down below for the audience. See you guys in another article.

To know more about JavaScripts DOM please check Wikipedia click here.

Stay Connected Stay Safe. Thank you

Basic Engineer

Hey Readers! We have more than fifteen years of experience in Software Development, IoT, Telecom, Banking, Finance and Embedded domain. Currently we are actively working on Data Science, ML and AI with multiple market leaders worldwide. Happy Reading. Cheers!


Leave a Reply

Avatar placeholder

Your email address will not be published. Required fields are marked *