Post
Ask Question

Introduction To DOM Nodes in JavaScript

Introduction

 
The DOM represents a document as a tree. The tree is made up of parent-child relationships, a parent can have one or many child nodes.
 
When a web page is loaded, the browser creates a Document Object Model of the page. 
 
The HTML DOM is a standard for getting, changing, adding, or deleting HTML elements.
 
Consider the following HTML:
  1. <html>  
  2. <head>  
  3.     <title>Good Morning</title>  
  4. </head>  
  5. <body>  
  6.     Hello  
  7. </body>  
  8. </html> 
The DOM will look like:
 
DOM1
 
At the top level, there is an HTML node, with two children: head and body, among which only the head tag has a child tag, title.
 
The idea of the DOM is that every node is an object. We can get a node and change its properties.
 
Example
  1. <html>  
  2.     <head>  
  3.         <title>ABHIJEET</title>  
  4.     </head>  
  5.     <body>  
  6.         <div>HELLO</div>  
  7.         <ul>  
  8.             <li>WOW</li>  
  9.             <li></li>  
  10.         </ul>  
  11.         <div>GREAT</div>  
  12.     </body>  
  13. </html> 
And here is the DOM if we represent it as a tree.
 
DOM2
 
Properties
 
Using the Document Object Model (DOM):
  • JavaScript can change or remove all the HTML elements.
  • JavaScript can change or remove all the HTML attributes.
  • JavaScript can change all the CSS styles.
  • JavaScript can add new HTML elements and attributes.


Similar Articles