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.
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.
Changing the HTML output stream
JavaScript is able to create dynamic HTML content:
In JavaScript, document.write () can be used to write content directly to the HTML output stream.
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:
document.getElementById (ID). innerhtml=New HTML
Changing HTML Properties
<! DOCTYPE html> document.getElementById ("image"). src= "Landscape.jpg"; </script></body>
JavaScript HTML DOM