Latest web development tutorials
×

JavaScript Tutorial

JavaScript Tutorial JavaScript Introduction JavaScript usage JavaScript Output JavaScript grammar JavaScript Statement JavaScript Notes JavaScript variable JavaScript type of data JavaScript Object JavaScript function JavaScript Scope JavaScript event JavaScript The string JavaScript Operator JavaScript Comparison JavaScript If...Else JavaScript switch JavaScript for JavaScript while JavaScript Break & Continue JavaScript typeof JavaScript Type conversion JavaScript Regular Expressions JavaScript error JavaScript debugging JavaScript Variable promotion JavaScript Strict mode JavaScript Use errors JavaScript Form validation JavaScript Keep the keyword JavaScript JSON JavaScript void JavaScript Code specification

JS function

JavaScript Function definition JavaScript Function parameter JavaScript Function call JavaScript Closure

JS HTML DOM

DOM Introduction DOM HTML DOM CSS DOM event DOM EventListener DOM element

JS Advanced Tutorial

JavaScript Object JavaScript Number JavaScript String JavaScript Date JavaScript Array JavaScript Boolean JavaScript Math JavaScript RegExp Object

JS Browser BOM

JavaScript Window JavaScript Window Screen JavaScript Window Location JavaScript Window History JavaScript Navigator JavaScript Pop-ups JavaScript Timing events JavaScript Cookies

JS Library

JavaScript Library JavaScript test jQuery JavaScript test Prototype

JS Examples

JavaScript Examples JavaScript Object instance JavaScript Browser object instance JavaScript HTML DOM Examples JavaScript to sum up

JS Reference Manual

JavaScript Object HTML DOM Object

JavaScript HTML DOM

Through the HTML DOM, access to all the elements JavaScript HTML document.

HTML DOM (Document Object Model)

When the page is loaded, the browser will create the page document object model (Document Object Model).

HTML DOM model is structured as a tree of objects:

HTML DOM tree

DOM HTML tree

Programmable object model, JavaScript gained sufficient ability to create dynamic HTML.

  • JavaScript can change page for all HTML elements
  • JavaScript can change HTML page all properties
  • JavaScript can change page all CSS styles
  • JavaScript can react to all events page

Finding HTML elements

Typically, JavaScript, you need to manipulate HTML elements.

In order to do this thing, 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

Finding HTML elements by id

Finding HTML elements in the DOM The easiest way is by using the element's id.

This example finds id = "intro" element:

Examples

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

try it"

If it finds the element, the method will be the object form (x in) the returns that element.

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

Finding HTML elements by tag name

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

Examples

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

try it"

Find HTML elements by class name

In this case bygetElementsByClassName function to find the class = "intro" element:

Examples

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

try it"

HTML DOM Tutorial

In this tutorial the following pages, you will learn:

  • How to change the content of the HTML element (innerHTML)
  • How to change the style of HTML elements (CSS)
  • How HTML DOM event of a reaction
  • How do I add or remove HTML elements