Document Object Model in JavaScript - Part One


In the previous chapter, we learned about the array, how to access the arrays and its methods in JavaScript with the example programs.
In this chapter, we will learn about DOM (Document Object Model) in JavaScript. The DOM is created when the web page is loaded. It allows access to the entire HTML Page. JavaScript can change the HTML elements, HTML attribute, CSS styles in the page. JavaScript can add and remove the HTML elements and attributes, and react to all the existing elements in the event.

DOM Structure

When you open any web page in the browser, the HTML of the page is loaded and presented to the screen. JavaScript can be used to dynamically add a page's DOM to add, delete, and modify elements. The DOM represents a document as a tree structure.
Document Object Model in JavaScript
Since the body is an element of the DOM, you can access it using the document object and modify the content of the internal HTML property.
For Example: document. bodyinnerHTML = (“text”)

DOM Nodes

All HTML Elements are treated as nodes or objects. The nodes are attributes, elements, text, link, document, etc.…
  • Document -Document node
  • HTML element – Element node
  • HTML attribute – Attribute Nodes
  • Text inside HTML elements – Text nodes

DOM Properties & Methods

Used to change the values of HTML elements.
  • InnerHTML
  • innerText
Action that Perform on Html elements
  • getElementByID()
  • getElementsByName()
  • getElement ByTagName()
  • getElementsByClassName()

DOM Manipulation

Manipulation means to create, modify, delete and add attributes to all functionalities.
  • getAttribute() – get new attribute
  • setAttribute() – set the new attribute
  • removeChild() – remove elements
  • createElement() – Create New element
  • createTextNode() – Text write in a element
  • appendChild() – join the object
  • replaceChild() – replace the tag
  • ChildElementCount() – inside the division tag count the tag
The following example shows how to display title in a web page.
Try it yourself:
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title>Document Object In JavaScript</title>  
  6. </head>  
  7. <body>  
  8.     <script type="text/javascript">  
  9.         document.write(document.title); // to get the title   
  10.     </script>  
  11. </body>  
  12. </html>  
Document Object Model in JavaScript
Get the Image count in a Web page
Try it yourself:
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title>Document Object In JavaScript</title>  
  6. </head>  
  7. <body>  
  8.     <h2>click Button show Images And Image Length in Document Object in JavaScript</h2>  
  9.     <img src="image 1.png" width="500px">  
  10.     <img src="image 2.png" width="150px">  
  11.     <img src="image 3.png" width="500px">  
  12.     <p><h3>Number of images on the web page:  
  13.     <script type="text/javascript">  
  14.         document.write(document.images.length);  
  15.     </script>  
  16.     </p>  
  17. </h3>  
  18. </body>  
  19. </html>  
Document Object Model in JavaScript


In this chapter,we learned about the basics of Document Objects Model, its manupulation and its methods in JavaScript.
Vijayakumar S
572 3.9k 1.2m
Next » Document Object Model in JavaScript - Part Two