www.pickatutorial.com Computer Tutorials
Top eBooks: C/C++ | C# | Android | Mathematics | Database | Cloud | Graphics | Networking | Oracle | Hardware | AI
Top Tutorials: C/C++ | C#.NET | PHP MySQL | Java | Java Script | jQuery | HTML | xHTML | HTML5 | VB Script| CSS
Lessons HTML Document Object Model (DOM) Bookmark and Share
Tutorial Home
Lesson 1
Lesson 2
Lesson 3
Lesson 4
Lesson 5
Lesson 6
Lesson 7
Lesson 8
Lesson 9
Lesson 10
Lesson 11
Lesson 12
Lesson 13
Lesson 14
Lesson 15
Lesson 16
Lesson 17
Lesson 18
Lesson 19
Lesson 20
Lesson 21
Lesson 22
Lesson 23
Lesson 24
Lesson 25
Lesson 26
Lesson 27
Lesson 28
Lesson 29
Lesson 30
Lesson 31
Lesson 32
Lesson 33
Lesson 34
Lesson 35
Lesson 36
Lesson 37
Lesson 38
Lesson 39
Lesson 40
Lesson 41
Lesson 42
Lesson 43
Lesson 44
Lesson 45
Lesson 46
Lesson 47
Lesson 48
Lesson 49
When a web page is loaded in a web browser, the web browser creates an object model of the HTML found in the page. This object model is called the Document Object Model or DOM for short.

With the help of JavaScript we can access all the elements of an HTML web page and insert new HTML into it, if needed. In fact JavaScript can:
  • Manipulate all the HTML elements of the web page
  • Manipulate all the HTML attributes of the web page
  • Manipulate all the CSS styles of the web page
  • React to all the events of the web page
Before changing or manipulating the HTML of the web page, we need to get a reference or handle to it. In other words we need to store an HTML element in a variable before playing with it. This is referred to as finding an element.

We can find an HTML element from the DOM using either its ID or its tag name.

Finding HTML Elements by ID
The following line of code finds an HTML element by ID:

var element = document.getElementById("test");

If there is an element in the DOM with an attribute id="test", the above line of code would return the element as an object. The function returns null if an element is not found.

Finding HTML Elements by Tag Name
The following line of code finds all <h1> elements:

var h1Elements = document.getElementsByTagName("h1");

Changing the HTML Output Stream

Next >>> Lesson No. 47: JavaScript: Manipulating HTML

Home - Advertise - Contact - Disclaimer - About Us
© Since 2006 pickatutorial.com -- All Rights Reserved.