JavaScript

Various Methods For Browser Object Model in JavaScript

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 bowser. 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 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

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs