Document Object Model (DOM)

What is DOM?

The purpose of Document Object Model (DOM) is to allow programs and scripts running in a web client (browser) to access and manipulate the structure and content of markup documents. The DOM represents the documents as Nodes and Objects so developers can interact with the page programatically.

DOM also allows the creation of new documents programmatically, in the working memory. DOM assumes a hierarchical, tree data-structure of documents and it provides platform-neutral and language-neutral APIs to navigate and modify the tree data-structure.

If documents are becoming applications, we need to manage a set of user-interactions with a body of information. The document thus becomes a user-interface to information that can change the information and the interface itself.

In comparison, when the XML processor parses an XML document, in general it produces as a result a representation that is maintained in the processor’s working memory. This representation is usually a tree data structure, but not necessarily so. DOM is an “abstraction,” or a conceptual model of how documents are represented and manipulated in the products that support the DOM interfaces. Therefore, in general, the DOM interfaces merely “make it look” as if the document representation is a tree data structure. Remember that DOM specifies only the interfaces without implying a particular implementation. The actual internal data structures and operations are hidden behind the DOM interfaces and could be potentially proprietary.

The object model in the DOM is a programming object model that comes from object-oriented design (OOD). It refers to the fact that the interfaces are defined in terms of objects. The name “Document Object Model” was chosen because it is an “object model” in the traditional OOD sense: documents are modeled using objects, and the model encompasses the structure as well as the behavior of a document and the objects of which it is composed. As an object model, the DOM identifies:

  • The interfaces and objects used to represent and manipulate a document
  • The semantics of these interfaces and objects, including both behavior and attributes
  • The relationships and collaborations among these interfaces and objects.

Core DOM Interfaces

Models are structures. The DOM closely resembles the structure of the documents it models. In the DOM, documents have a logical structure which is very much like a tree.

Core object interfaces are sufficient to represent a document instance (the objects that occur within the document itself). The “document” can be HTML or XML documents.

The Node object is a single node on the document structure model and the Document object is the root node of the document structure model and provides the primary access to the document’s data. The Document object provides access to the Document Type Definition (DTD) (and hence to the structure), if it is an XML document. It also provides access to the root level element of the document. For an HTML document, that is the <HTML> element, and in an XML document, it is the top-level element. It also contains the factory methods needed to create all the objects defined in an HTML or XML document.

Each node of the document tree may have any number of child nodes. A child will always have an ancestor and can have siblings or descendants. All nodes, except the root node, will have a parent node. A leaf node has no children. Each node is ordered (enumerated) and can be named.

The DOM establishes two basic types of relationships:

  1. Navigation: The ability to traverse the node hierarchy, and
  2. Reference: The ability to access a collection of nodes by name.

The structure of the document determines the inheritance of element attributes. Thus, it is important to be able to navigate among the node objects representing parent and child elements. Given a node, you can find out where it is located in the document structure model and you can refer to the parent, child as well as siblings of this node. A script can manipulate, for example, heading levels of a document, by using these references to traverse up or down the document structure model. This might be done using the NodeList object, which represents an ordered collection of nodes.

Reference

Suppose, for example, there is a showcase consisting of galleries filled with individual images. Then, the image itself is a class, and each instance of that class can be referenced. (We can assign a unique name to each image using the NAME attribute.) Thus, it is possible to create an index of image titles by iterating over a list of nodes. A script can use this relationship, for example, to reference an image by an absolute or relative position, or it might insert or remove an image. This might be done using the NamedNodeMap object, which represents (unordered) collection of nodes that can be accessed by name.

Examples

For example, the DOM specifies that the querySelectorAll method in this code snippet must return a list of all the <p> elements in the document:

const paragraphs = document.querySelectorAll("p");
// paragraphs[0] is the first <p> element
// paragraphs[1] is the second <p> element, etc.
alert(paragraphs[0].nodeName);

For more information, read Introduction to the DOM

License:
  • This work is a derivative of "Software Engineering" by Ivan Marsic. It has been lightly edited to be rendered as HTML content. Original copyright notice: Copyright © 2012 by Ivan Marsic. All rights reserved.


Speak Your Mind