JavaScripts DOM

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).

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.

example

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

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

Properties	Describe
table.row	Collection of tr element.
table.caption	reference of <caption>
table.tHead	reference of <thead>
table.tFoot	reference of <tfoot>
table.tBody	Collection of <tbody> element
tbody.rows	Collection of <tr> inside
tr.cells	Collection of <td> and <th>
tr.sectionRowIndex	Index of <tr> inside enclosing element
tr.rowIndex	Row number starting from 0
td.cellIndex	no 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