JavaScript HTML 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

• 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
  • Find HTML elements by ID

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

    Instance

    This example finds the id= "Intro" element:

    var X=document.getelementbyid ("Intro");

  • 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 an instance of an HTML element with a tag name

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

    var X=document.getelementbyid ("main"); var y=x.getelementsbytagname ("P");

    Tip: Finding HTML elements through the class name is not valid in IE 5,6,7,8.

    HTML DOM Tutorials

    In the remainder of this tutorial, you will learn:

    • How to change the contents of an HTML element (InnerHTML)
    • How to change the style of HTML elements (CSS)
    • How to respond to HTML DOM event pairs
    • How to add or remove HTML elements

JavaScript HTML DOM