JavaScript HTML DOM

JavascriptHTML DOM

Through the HTML DOM, you can access all the elements of a JavaScript HTML document.

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

Find HTML elements by ID

The simplest way to find HTML elements in the DOM is by using the ID of the element.

This example finds the id= "Intro" element:

Example var X=document.getelementbyid ("Intro");
Try it»

If the element is found, the method returns the element in the form of an object (in X).

If the element is not found, the X will contain null.

Find HTML elements with tag names

This example finds the element id= "main" and then finds all the <p> elements in the id= "main" element:

Example var X=document.getelementbyid ("main");
var y=x.getelementsbytagname ("P");
Try it»

Find HTML elements by class name

This example uses the getelementsbyclassname function to find the elements of the class= "Intro":

Example var x=document.getelementsbyclassname ("Intro");

JavaScript HTML DOM