HTML DOM in Depth

I am at the heart of every web page. I am your Document Object Model and I am not necessarily a tree

Are you a person who just started with HTML/CSS or someone who wants to have an in-depth knowledge of the advanced features of HTML? Then you are in the right place. So grab a cup of coffee and enjoy the third part of our HTML series, HTML DOM in Depth. Do not forget to cross-check the “Additional Point” section to get some interesting fact.

“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."

Confused? Let me make that simple. Imagine that, every web page is a document and every element( be it text or image or table) inside that webpage is stored in that document as an object in a tree format, which can be manipulated later with a scripting language such as JavaScript.

Now, when a web page is loaded, the browser creates such a document every time which is called, **Document Object Model (DOM) **of the page.

The DOM represents the document as nodes and objects so that programs can change the document structure, style, and content. In that hat way, programming languages connect to the webpage.

Why DOM is important?

JavaScript fan? Then definitely read it out.

The DOM is not a programming language, but without it, the JavaScript language wouldn’t be able to acess any of the web pages elements in HTML documents, XML documents or their component parts .
As per the W3C specification, one important objective for the Document Object Model is to provide a standard programming interface that can be used in a wide variety of environments and applications.

With DOM, JavaScript gets all the power it needs to create dynamic HTML such as changing the HTML elements, attributes, CSS styles, elements and events in the page. We can say that:

API = DOM + JavaScript

Types of DOM:

The W3C DOM standard is separated into 3 different parts:

• Core DOM — standard model for all document types(All DOM implementations must support the interfaces listed as “fundamental” in the Core specification.)

• XML DOM — standard model for XML documents (As the name suggests, all XML elements can be accessed through the XML DOM.)

• HTML DOM — standard model for HTML documents (The HTML DOM is a standard for how to get, change, add, or delete HTML elements.)

In this article, we will mostly deal with Core and HTML DOM so if you want to know more about XML Dom, refer this.

THE Document

The Document the interface represents any web page loaded in the browser and serves as an entry point into the web page's content, which is the DOM tree. The DOM includes elements such as

and

etc. as nodes. It provides various functionality globally to the document, for example how to obtain the page's URL or create new elements in the document.

HTML documents served with the "text/html" content-type, also implement the HTMLDocument interface, whereas XML and SVG documents implement the XMLDocument interface.

know more about the Document interface here

The Window (BOM)

Before getting into the window object, let’s talk briefly about another concept, BOM. The Browser Object Model (BOM) allows JavaScript to “talk to” the browser. Even though there are no official standards for the Browser Object Model (BOM), modern browsers have implemented (almost) the same methods and properties for JavaScript interactivity.

Now, the window object basically represents the browser window. All global JavaScript objects, functions, and variables automatically become members of the window object. Even the document object (of the HTML DOM) is a property of the window object:

window.document.getElementById(“header”);

Obviously there are even more stuff you can do with the window object which you will be able to find here

The Object

All of the properties, methods, and events available for manipulating and creating web pages are organized into objects inside dom (for example, the document is itself an object that represents the document itself, the table an object that implements the special HTMLTableElement DOM interface for accessing HTML tables, and so forth).

The modern DOM is built using multiple APIs that work together. The core DOM defines the objects that fundamentally describe a document and the objects within it. This is enhanced and expanded upon need. For example, the HTML DOM API adds support for representing HTML documents to the core DOM.

The Interface

Many objects borrow from several different interfaces.

The HTMLTableElement interface provides special properties and methods (beyond the regular HTMLElement object interface it also has available to it by inheritance) for manipulating the layout and presentation of tables in an HTML document.

The table object, for example, implements a specialized HTMLTableElement interface, which includes such methods as createCaption and insertRow. But since it's also an HTML element, table implements the Element interface described in the DOM Element Reference chapter. And finally, since an HTML element is also, as far as the DOM is concerned, a node in the tree of nodes that make up the object model for an HTML or XML page, the table object also implements the more basic Node interface, from which Element derives.

When you get a reference to a table object, as in the following example, you routinely use all three of these interfaces interchangeably on the object, perhaps without knowing it.

Commonly used interfaces: (src: https://developer.mozilla.org/)

• document.getElementById(id)

• document.getElementsByTagName(name)

• document.createElement(name)

• parentNode.appendChild(node)

• element.innerHTML

• element.style.left

• element.setAttribute()

• element.getAttribute()

• element.addEventListener()

• window.content

• window.onload

• window.scrollTo()

Accessing data from DOM

JavaScript uses the DOM to access the document and its elements in the webpage using the API for the document or window .

For example, the standard DOM specifies that the getElementsByTagName the method in the code below must return a list of all the

elements in the document:

const paragraphs = document.getElementsByTagName("p");
// paragraphs[0] is the first <p> element

Similarly, we can also access HTML elements by:

• id : var x = document.getElementById(“intro”); (Only one element gets returned with this method)

• class name: var x = document.getElementsByClassName(“intro”);

• CSS selectors: var x = document.querySelectorAll(“p.intro”);

• HTML elements by HTML object collections:

  document.anchors.length;
  document.forms.length;
  document.images.length;
  document.links.length;
  document.scripts.length;

Though we focus exclusively on JavaScript in this reference documentation, implementations of the DOM can be built for any language, as this Python example demonstrates:

# Python DOM example
#src: [https://developer.mozilla.org/](https://developer.mozilla.org/)

import xml.dom.minidom as m
doc = m.parse(r"C:\Projects\Py\chap1.xml")
doc.nodeName # DOM property of document object
p_list = doc.getElementsByTagName("para")

DOM Datatypes

As DOM is a huge object, there are a number of different data types being passed around the API to use DOM, that you should be aware of.

1. **Document: **represents any web page loaded in the browser and serves as an entry point into the web page’s content

2. ***Node: **Basically *every object located within a document is a node of some kind.

3. **Element: **It refers to an element or a node of type element which is basically an object in the DOM API

4. **NodeList: **A nodeList is an array of elements

5. **Attribute: **Attributes are nodes in the DOM just like elements are, though an HTML attribute always belongs to an HTML element in the DOM.

Know more of the DOM properties and methods here.

What the Document Object Model is not

This section is designed to give a more precise understanding of the Document Object Model by distinguishing it from other systems that may seem to be like it.

• The Document Object Model does not define any binary source code in its interfaces.

• The Document Object Model is not a way of describing the objects of XML or HTML. Instead, it specifies how XML and HTML documents are represented as objects, so that they may be used in object-oriented programs.

• The Document Object Model is not a set of data structures, it is an object model that uses various interfaces to access the objects.

• The Document Object Model does not define “the true inner semantics” of XML or HTML. It doesn't understand which object in the document is appropriate to the context or vice versa

• The Document Object Model, despite its name, is not a competitor to the Component Object Model (COM). COM, like CORBA, is a language-independent way to specify interfaces and objects.

Interaction with DOM element

Additional Points to Note

1. In the Document Object Model, documents have a logical structure which is very much like a tree; or to be precise like a “forest” which can contain more than one tree. However, the DOM does not specify that documents need to be implemented as a tree, nor does it specify how the relationships among objects should be implemented in any way. In other words, the object model specifies the logical model for the programming interface, and this logical model may be implemented in any way that a particular implementation finds convenient.

2. One important property of DOM structure models is structural isomorphism: if any two DOM implementations are used to create a representation of the same documents, they will create the same structure model, with precisely the same objects and relationships.

3. The name “Document Object Model” was chosen because it is an “object model” is used in the traditional object-oriented design sense: documents are modelled using objects. In other words, the nodes in the DOM diagram do not represent a data structure, they represent objects, which have functions and identity.

4. If the browser encounters malformed HTML, it automatically corrects it when making the DOM. As an example, if the HTML file is the single word "Hello", the browser will wrap it into and

   in the DOM and add the required <head>. Similarly, Tables always have <tbody>

5. Browser tools (to be covered soon) that work with DOM usually do not show spaces at the start/end of the text and empty text nodes (line-breaks) between tags

6. If something’s in HTML, then it also must be in the DOM tree and that includes comment.

7. Levels of DOM:

Resources

1. https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction

2. https://www.w3schools.com/whatis/whatis_htmldom.asp

3. https://www.w3schools.com/js/js_htmldom.asp

4. w3.org/TR/WD-DOM/introduction.html

5. https://javascript.info/dom-nodes