Post
Ask Question

Various Methods For Browser Object Model in JavaScript

Introduction

 
This article tries to explain some methods for a browser object model used in JavaScript by showing simple examples.
 

Browser object model

 
Basically the Browser Object Model (BOM) is used to interact with the browser. The default object of the browser is the window object, in other words, you can call any function of the window object by specifying it either with or without qualification by the window object. The document object is used to represent the HTML document or content and help to form the Document Object Model (DOM). 
 

Methods used in JavaScript

 
There are basically three methods that are explained here.
 
Method 1: document.getElementById()
 
The document.getElementById() method returns the elements of a specific id. We can also use this method to get the value of input text provided that we need to define the id for the input field. The easiest way to find HTML elements in the Document Object Model (DOM) is by using the element id.
 
Now let's have a look at the example to see the effect of this method.
 
Example
 
The following example will calculate the area of the circle and then make an alert.
  1. <html>    
  2. <head>    
  3.     <title>Id Element</title>    
  4. </head>    
  5. <body>    
  6.     <script type="text/javascript">    
  7.         function getarea() {    
  8.             var radius = document.getElementById("radius").value;    
  9.             alert(3.14 * radius * radius);    
  10.         }    
  11.     </script>    
  12.     <form>    
  13.     Enter the value of radius:<input type="text" id="radius" name="radius" /><br>    
  14.     <input type="button" value="Area of circle" onclick="getarea()" />    
  15.     <input type="reset" name="reset" value="reset" />    
  16.     </form>    
  17. </body>    
  18. </html>   
    Output
     
    area of circle
     
    Next Output
     
    Output
     
    Method 2: document.getElementName()
     
    The document.getElementName() method returns all elements of the specified name.
     
    Example
     
    In the following example, the function is made that counts the total entities present.
    1. <html>    
    2. <head>    
    3.     <title>Name Element</title>    
    4. </head>    
    5. <body>    
    6.     <script type="text/javascript">    
    7.         function countElements() {    
    8.             var count = document.getElementsByName("member");    
    9.             alert("Total member types:" + count.length);    
    10.         }    
    11.     </script>    
    12.     <form>    
    13.     Admin:<input type="radio" name="member" value="admin">    
    14.     Employee:<input type="radio" name="member" value="employee">    
    15.     Manager:<input type="radio" name="member" value="manager">    
    16.     Customer:<input type="radio" name="member" value="customer">    
    17.     <input type="button" value="Total member types" onclick="countElements()">    
    18.     </form>    
    19. </body>    
    20. </html> 
    Output
     
    count the total entity
     
    Next Output
     
    Next Output
     
    Method 3: document.getElementsByTagName()
     
    The document.getElementName() method returns all elements of the specified tag name.
     
    Example
     
    The following example elements are returning a specified tag and also counting the number of specifeid tags.
    1. <html>    
    2. <head>    
    3.     <title>TagName Element</title>    
    4. </head>    
    5. <body>    
    6.     <p>    
    7.         Hello JavaScript!</p>    
    8.     <div id="main">    
    9.         <p>    
    10.             The method is very useful.</p>    
    11.         <p>    
    12.             This example demonstrates the <b>getElementsByTagName</b> method</p>    
    13.     </div>    
    14.     <p id="demo">    
    15.     </p>    
    16.     <script>    
    17.         var x = document.getElementById("main");    
    18.         var y = x.getElementsByTagName("p");    
    19.         document.getElementById("demo").innerHTML =    
    20. 'The first paragraph inside "main" is ' + y[0].innerHTML;    
    21.     </script>    
    22.     <script type="text/javascript">    
    23.         function countfont() {    
    24.             var totalfont = document.getElementsByTagName("font");    
    25.             alert("total font tags are: " + totalfont.length);    
    26.         }    
    27.         function counth3() {    
    28.             var totalh3 = document.getElementsByTagName("h3");    
    29.             alert("total h3 tags are: " + totalh3.length);    
    30.         }    
    31.         function countcolor() {    
    32.             var totalcolor = document.getElementsByTagName("color");    
    33.             alert("total color tags are: " + totalcolor.length);    
    34.         }    
    35.     </script>    
    36.     <font>This is a font tag</font>    
    37.     <h3>    
    38.         This is h3 tag</h3>    
    39.     <h3>    
    40.         This is h3 tag</h3>    
    41.     <color>This is a color tag</color>    
    42.     <br>    
    43.     <color>This is a color tag</color>    
    44.     <br>    
    45.     <color>This is a color tag</color>    
    46.     <br>    
    47.     <button onclick="countfont()">    
    48.         count font tag</button>    
    49.     <button onclick="counth3()">    
    50.         count h3 tag</button>    
    51.     <button onclick="countcolor()">    
    52.         count color tag</button>    
    53. </body>    
    54. </html>   
      Output
       
      counting the number of various tags
       
      Next Output
       
      Total Tag
       
      Total h3 Tag
       
      Total color Tag


      Similar Articles