DOM Intro

DOM (Document Object Model)

The DOM – document object model represents the complete html document.

When html document is loaded in any browser, it becomes a document object that is called DOM. It is the root element that represents the html document. It has properties and methods. With the help of document object, we can add dynamic content and elements to our web page.

As mentioned earlier, it is the object of window. So

window.document  

The DOM is a W3C (World Wide Web Consortium) standard. The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to access dynamically and update the content, structure, and style of a document dynamically.”


HTML DOM Tree of Objects

With the HTML object model, JavaScript gets all the rights, it needs to make dynamic HTML:

  • Can modify all the HTML elements in the page
  • Can modify all the HTML attributes in the page
  • Can modify all the CSS styles in the page
  • Can remove existing HTML elements and attributes
  • Can add new HTML elements and attributes
  • Can react to all existing HTML events in the page
  • Can create new HTML events in the page

HTML DOM

The HTML DOM is a standard object model and programming interface for HTML. It defines:

  • HTML elements as objects
  • Properties of all HTML elements
  • Methods to access all HTML elements
  • Events for all HTML elements

With the HTML DOM, JavaScript can access and modify all the elements of an HTML document.