Various Methods For Browser Object Model in JavaScript

Gopi Chand
10y
3.7k
0
0

Article

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.

Example

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

Example

The following example elements are returning a specified tag and also counting the number of specifeid tags.