Explain DOM Manipulation in Javascript?

The DOM is a W3C (World Wide Web Consortium) standard. The DOM defines a standard for accessing documents:

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

The W3C DOM standard is separated into 3 different parts:

  • Core DOM - standard model for all document types
  • XML DOM - standard model for XML documents
  • HTML DOM - standard model for HTML documents

Levels of DOM:
Level 0: Provides a low-level set of interfaces.
Level 1: DOM level 1 can be described in two parts: CORE and HTML.

  • CORE provides low-level interfaces that can be used to represent any structured document.
  • HTML provides high-level interfaces that can be used to represent HTML documents.

Level 2: consists of six specifications: CORE2, VIEWS, EVENTS, STYLE, TRAVERSAL, and RANGE.

  • CORE2: extends the functionality of CORE specified by DOM level 1.
  • VIEWS: views allows programs to dynamically access and manipulate the content of the document.
  • EVENTS: Events are scripts that are either executed by the browser when the user reacts to the web page.
  • STYLE: allows programs to dynamically access and manipulate the content of style sheets.
  • TRAVERSAL: This allows programs to dynamically traverse the document.
  • RANGE: This allows programs to dynamically identify a range of content in the document.

Level 3: consists of five different specifications: CORE3, LOAD and SAVE, VALIDATION, EVENTS, and XPATH.

  • CORE3: extends the functionality of CORE specified by DOM level 2.
  • LOAD and SAVE: This allows the program to dynamically load the content of the XML document into the DOM document and save the DOM Document into an XML document by serialization.
  • VALIDATION: This allows the program to dynamically update the content and structure of the document while ensuring the document remains valid.
  • EVENTS: extends the functionality of Events specified by DOM Level 2.
  • XPATH: XPATH is a path language that can be used to access the DOM tree.