What is DOM ?

What is DOM ?

Whenever we load any webpage in any browser, that web page creates a DOM (Document Object Model) of that page. DOM(Document object model) defines the standard to access the elements of web pages. DOM allows programs or scripts to dynamically access and update the elements, structure, style, etc., of web pages.

DOM Methods

DOM methods are the actions we can perform on the web page elements. There are some methods to access any particular element of an HTML page.

  • getElementById() : Using this method you can access an element by its id.
  • innerHTML property : This property is used to replace the value or the content present in any HTML element.
  • getElementsByClassName() : This method returns the elements as per the class name.  
  • getElementsByTagName() : This method finds the element as per tag.
  • createElement() :This method works as per the name, it creates new elements and places them anywhere in the webpage.  
  • appendChild() : : This method adds or joins one element after another element.
  • removeChild() : This method is used to remove any particular child from the web pages.  

Advantages of DOM in javascript

  • DOM provides a platform and independence for languages.
  • DOM is traversable in HTM web pages and can access any element.
  • DOM is dynamic and allows users to add, delete, update, or move a web page's elements.
  • DOM has a robust API
  • DOM is straightforward to use and modify.

Example :

<html> <body> <h2>Knowledge2life</h2> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = "Welcome to Knowledge2life"; </script> </body> </html>

OUTPUT:

Knowledge2life

Welcome to Knowledge2life