HTML Document Object Model (DOM) in JavaScript

The DOM is an object-oriented representation of the website pages, which is modified with a scripting language JS.

The DOM stand for Document Object Model.

When a web page is loaded, the browser creates a DOM of the page.

The DOM model is a tree of Objects.

The DOM is a platform that allows programs and scripts to dynamically access and update the content and style of a document.

It is a programming interface for HTML and XML documents. It represents the document as nodes and objects.

With the object model, JS will have all the power to create dynamic HTML:

  • It can be change all the HTML elements in the page
  • It can bechange all the HTML attributes in the page
  • It can bechange all the CSS styles in the page
  • It can be remove existing HTML elements and attributes
  • It can be add new HTML elements and attributes
  • It can be react to all existing HTML events in the page
  • It can be create new HTML events in the page

The DOM standard is separated into three different parts:

  • Core DOM – For all document types
  • XML DOM – For XML documents
  • HTML DOM – For HTML documents

For example, the standard DOM specifies that

the getElementsByTagName method must return a list of all the <P> elements in the document.

varpara = document.getElementsByTagName(“P”);

alert(para[0].nodeName);

How To Access the DOM?

There is nothing special to begin using the DOM.

Different implementations of the DOM will be happened in different browsers.

Every web browser uses some document object model to make web pages accessible via JavaScript.

That DOM programming can be simple as it is displays an alert message by using the alert() function from the window object.

For Example

<body onload=”window.alert(‘Welcome to my home page!’);”>

When creating a script , whether it’s inline in a <script> element , you can immediately using the API for the document or window elements to manipulate the document.

Example

From where the DOM came?

The DOM originated as a specification to allow JS and Java programs to be portable among web browsers.

Dynamic HTML was the immediate ancestor of the DOM, and it was originally thought of largely in terms of browsers.

However, when the DOM Working Group was formed, it was also joined by vendors in other domains, including HTML or XML editors and document repositories.

DOM Tree of Objects

Document –

Root element(html) –

          Element(head) –

                   Element(title)

                   Text(My Title)

          Element(body) –

                   Element(a) –

                             Attribute(href)

                             Text (My Link)

                   Element(h1) –

                             Text(My Header)

Example with DOM Method

OUTPUT

Finding DOM HTML Element by Id

Hello World!

This example demonstrates the getElementsById method.

OUTPUT

This example demonstrates the getElementsById method.

The text from the intro paragraph is Hello World!

Read More

  1. Popup Box in JavaScript
  2. Classes and Objects in JavaScript