Let’s Understand the Levels of Document Object Model (DOM)

In the previous Article we learned about the Document Object Model (DOM). Now let's learn what are the levels of the DOM. The W3C DOM specifications are divided into multiple levels where each level contains some required and optional modules. An application can claim support of a level by implementing all the requirements of that level.

The Levels of DOM are given below

Level 0: Supports an interface DOM, which existed before the creation of DOM Level 1. Examples include the Dynamic HTML (DHTML) Object Model or the Netscape intermediate DOM. Level 0 is not a formal specification published by the W3C, but rather a shorthand version of what existed before that standardization process.

Level 1: Includes the Navigation of the DOM (HTML and XML) documents and allows content manipulation. Elements of the HTML specificatiojn are also included in this level.

Level 2: Supports namespace, filtered views and events
Level 3: It has many specifications:

• Core
• Load and Save
• XPath
• Views and formatting
• Requirements
• Validation

DOM Level 1: The goal of the DOM Level 1 specification is to define a programmatic interface for XML & HTML. The DOM Level 1 specification is separated into the two parts:

• Core
• HTML

The Core DOM Level 1 section provides a low-level set of fundamental interfaces that can represent any structured document, as well as defining extended interfaces for representing an XML document. These extended XML interfaces need not be implemented by a DOM implementation that only provides access to HTML documents; all of the fundamental interfaces in the Core section must be implemented. A compliant DOM implementation that implements the extended XML interfaces is required to also implement the fundamental Core interfaces, but not the HTML interfaces. The HTML Level 1 section provides additional, higher-level interfaces that are used with the fundamental interfaces defined in the Core Level 1 section to provide a more convenient view of an HTML document. A compliant implementation of the HTML DOM implements all of the fundamental Core interfaces as well as the HTML interfaces. (w3.org Says)

DOM Level 2: The DOM Level 2 specification consists of the following six specifications: the DOM2 Core, Views, Events, Style, Traversal and Range and HTML.

DOM Level 2 Core: Helps programs and scripts to access the update and the content and structure of documents dynamically. It consists of a set of Core Interfaces to create and manipulate the structure and contents of a document.

DOM Level 2 Views: Allows program and scripts to dynamically access and update the content of an HTML or XML document.

DOM Level 2 Events: Allows a generic event system to programs and scripts. It introduces the concepts of event flow, capture, bubbling, and cancellation. Famous methods here include addEventListener and handleEvent. Several interfaces make your life easier when dealing with events: EventTarget, EventListener, Event, DocumentEvent, MouseEvent, MutationEvent, and so on. However, it does not include an interface for the keyboard events, that will be dealt with in later versions of the DOM.
DOM Level 2 Style: Allows programs and scripts to dynamically access the content of style sheets. This specification defines the DOM level 2 Style Sheet and Cascading Style Sheet. The DOM level 2 Style Sheet interface is the base interface to represent any type of style sheet.

DOM Level 2 Traversal and Range: Allows programs and scripts to dynamically traverse and identify a range of content in a document. The DOM2 Traversal provides interfaces like NodeIterator and TreeWalker to easily traverse the content of a document. The DOM2 Range allows the creation, insertion, modification, and deletion of a range of content in a Document, DocumentFragment, or Attr. It can be characterized as selecting all of the content between a pair of boundary-points.

DOM Level 2 HTML: Allows programs and scripts to dynamically access and update the content and structure of HTML documents. It extends the interfaces defined in the DOM1 HTML, using the DOM2 Core possibilities. It introduces the contentDocument property, a useful way to access the document contained in a frame.

DOM Level 3

Sdfcaq The DOM Level 3 extends Level 2 by finishing support for XML 1.0 with namespaces. It also extends the user interface events and adds abstract schemas support such as DTDs XML Schema.

The DOM Level 3 specification contains the following five specifications:

• DOM3 Core
• Load and Save
• Validation

DOM Level 3 Core: Extends the functionality of the DOM1 and DOM2 Core specs. New methods and properties include adoptNode() and textContent, to name a couple.

DOM Level 3 Load and Save: Allows programs and scripts to dynamically load the content of an XML document into a DOM document, and serialize a DOM document into an XML document.

DOM Level 3 Validation: Allows programs and scripts to dynamically update the content and the structure of documents while ensuring that the document remains valid, or to ensure that the document becomes valid.

So this was the DOM Levels. Work more and learn more.

Now Let's try an example. Here we want to verify the Child Nodes of a node.

We know the combination of nodes, which in turn, may contain several child nodes. We can check whether a node has child nodes or not using the hasChildNodes() function, that returns true if the node has child nodes; otherwise it returns false.

We have specified T1 as the ID of the BODY node. See the following code:



When the user clicks on a respective button then the onclick event triggers that calls the checkNode() function.

In the function the ID of the nodes is retrieved by the getElementByID() function and stores the value of ID in the tag variable. Further the tag variable calls the hasChildNodes() function in the if block. The hasChild() function returns true if the specified node has child nodes; otherwise, it returns false.

The output for preceding code will be:



When we click on "Check Chinl Node" the output will be the following.





So this was the about DOM levels. Feel free to ping your questions.

Do the exercises, be an expert.