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