Dom object for JavaScript

HTML DOM (Document Object model)

When a Web page is loaded, the browser creates a Document object model for the page.

The HTML DOM model is constructed as a tree of objects.

HTML DOM Tree

With the programmable object model, JavaScript has the ability to create dynamic HTML.

• JavaScript can change all HTML elements in a page
• JavaScript can change all HTML attributes in a page
• JavaScript can change all CSS styles in a page
• JavaScript can react to all the events in the page

Finding HTML elements

Typically, with JavaScript, you need to manipulate HTML elements.

In order to do this, you must first find the element. There are three ways to do this:

• Find HTML elements by ID
• Find HTML elements by tag name
• Find HTML elements by class name

Change HTML Content

The simplest way to modify HTML content is to use the InnerHTML property.

To change the contents of an HTML element, use this syntax:

1 document.getElementById (ID). innerhtml=New HTML

Changing HTML Properties

To change the attributes of an HTML element, use this syntax:

Note: attribute represents the name of the property.

1 document.getElementById (ID). attribute=New value

Dom object for JavaScript