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.
- <html>
- <head>
- <title>Id Element</title>
- </head>
- <body>
- <script type="text/javascript">
- function getarea() {
- var radius = document.getElementById("radius").value;
- alert(3.14 * radius * radius);
- }
- </script>
- <form>
- Enter the value of radius:<input type="text" id="radius" name="radius" /><br>
- <input type="button" value="Area of circle" onclick="getarea()" />
- <input type="reset" name="reset" value="reset" />
- </form>
- </body>
- </html>
Output
Next
Output
Method 2: document.getElementName()
The document.getElementName() method returns all elements of the specified name.
ExampleIn the following example, the function is made that counts the total entities present.
- <html>
- <head>
- <title>Name Element</title>
- </head>
- <body>
- <script type="text/javascript">
- function countElements() {
- var count = document.getElementsByName("member");
- alert("Total member types:" + count.length);
- }
- </script>
- <form>
- Admin:<input type="radio" name="member" value="admin">
- Employee:<input type="radio" name="member" value="employee">
- Manager:<input type="radio" name="member" value="manager">
- Customer:<input type="radio" name="member" value="customer">
- <input type="button" value="Total member types" onclick="countElements()">
- </form>
- </body>
- </html>
Output
Next
Output
Method 3: document.getElementsByTagName()
The document.getElementName() method returns all elements of the specified tag name.
ExampleThe following example elements are returning a specified tag and also counting the number of specifeid tags.
- <html>
- <head>
- <title>TagName Element</title>
- </head>
- <body>
- <p>
- Hello JavaScript!</p>
- <div id="main">
- <p>
- The method is very useful.</p>
- <p>
- This example demonstrates the <b>getElementsByTagName</b> method</p>
- </div>
- <p id="demo">
- </p>
- <script>
- var x = document.getElementById("main");
- var y = x.getElementsByTagName("p");
- document.getElementById("demo").innerHTML =
- 'The first paragraph inside "main" is ' + y[0].innerHTML;
- </script>
- <script type="text/javascript">
- function countfont() {
- var totalfont = document.getElementsByTagName("font");
- alert("total font tags are: " + totalfont.length);
- }
- function counth3() {
- var totalh3 = document.getElementsByTagName("h3");
- alert("total h3 tags are: " + totalh3.length);
- }
- function countcolor() {
- var totalcolor = document.getElementsByTagName("color");
- alert("total color tags are: " + totalcolor.length);
- }
- </script>
- <font>This is a font tag</font>
- <h3>
- This is h3 tag</h3>
- <h3>
- This is h3 tag</h3>
- <color>This is a color tag</color>
- <br>
- <color>This is a color tag</color>
- <br>
- <color>This is a color tag</color>
- <br>
- <button onclick="countfont()">
- count font tag</button>
- <button onclick="counth3()">
- count h3 tag</button>
- <button onclick="countcolor()">
- count color tag</button>
- </body>
- </html>
Output
Next
Output