Easy Tutorial
Js Scope Jsref Class Extends Js Window Location Js Statements Js Variable Js Typeof Js Lib Prototype Js Cookies Javascript Json Parse Js Strict Js Json Js Conventions Js Loop For Js Function Parameters Js Htmldom Nodelist Js Objects Met Win Postmessage Js Comparisons Js Datatypes Jsref Split Js Ex Objects Js Function Js Chrome Js Async Js Obj String Js Obj Regexp Js Validation Api Js Htmldom Elements Js Form Validation Jsref Obj Array Js Function Closures Jsref Class Super Js Void Js Comments Js Object Prototype Js Ex Browser Js Class Inheritance Js Obj Date Js Summary Js If Else Js Htmldom Html Js Window History Jsref Regexp G Js Syntax Js Obj Math Js Loop While Js Window Jsref Obj Date Js Lib Jquery Js Examples Js Variables Js Switch Js Operators Js Obj Intro Js Break Js Obj Number Jsref Regexp I Js Let Const Js Htmldom Eventlistener Js Obj Array Js Timing Js Errors Jsref Replace Js Mistakes Js Htmldom Js Validation Js Tutorial Js Promise Js Function Invocation Js Reserved Js Htmldom Events Js Ex Dom Jsref Search Js Obj Boolean Js Output Js Libraries Jsref Match Js Htmldom Css Js Regexp Js Type Conversion Js Htmldom Collections Js Function Definition Js Events Js Class Intro Javascript Async Jsref Constructor Class Js Debugging Js Functions Js This Js Window Screen Js Howto Javascript Json Stringify Js Intro Jsref Class Static Js Window Navigator Obj Window Js Class Static Js Strings Index Js Popup Js Hoisting
❮ Js Mistakes Js Validation ❯

JavaScript HTML DOM

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

HTML DOM (Document Object Model)

When a web page is loaded, the browser creates a Document Object Model (DOM) of the page.

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

HTML DOM Tree

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

Finding HTML Elements

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

To do this, you must first find the elements. There are several ways to do this:

Finding HTML Elements by Id

The easiest way to find an HTML element in the DOM, is by using the element's id.

This example finds the element with id="intro":

Example

var x = document.getElementById("intro");

If the element is found, the method will return the element as an object (in x).

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

Finding HTML Elements by Tag Name

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

Example

var x = document.getElementById("main");
var y = x.getElementsByTagName("p");

Finding HTML Elements by Class Name

This example finds elements with class="intro" using the function:

Example

var x = document.getElementsByClassName("intro");

HTML DOM Tutorial

In the following sections of this tutorial, you will learn:

❮ Js Mistakes Js Validation ❯