JavaScript Browser Objects
In this JavaScript tutorial, you will learn about browser objects in JavaScript, categories of browser-based objects, additional browser objects, anchor object, link object, properties of link object and methods of link object.
JavaScript supports a number of browser-based objects. When a webpage loads by a browser that supports JavaScript, the browser creates a variety of JavaScript objects. This makes it possible to access the web page and handle elements, like HTML. There are a vast number of browser objects for JavaScript. This section highlights some of the most vital and supported by most popular browsers. With the help of these browser-based objects, it is possible for JavaScript to interact with the browser and the loaded webpage.
Categories of Browser-based Objects:
JavaScript browser-based objects are broadly categorized into two main categories:
- Browser Object Model also called BOM
- Document Object Model also called DOM
The Document Object Model (DOM) is a W3C standard meaning it is a platform- and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure and style of documents. DOM describes the relationship of the HTML elements within the document to the document object itself. The Document Object Model is actually present inside the Browser Object Model. The Browser Object Model or BOM, includes objects related to the browser. DOM does not include the browser and all things related to it. In the DOM, the topmost object is the document object. In the BOM, the topmost level contains the window object followed by the navigator, screen, history, location, and document objects.
There are additional browser objects available in JavaScript:
- anchor object
- applet object
- area object
- button object
- checkbox object
- elements object
- embed object
- event object
- FileUpload object
- form object
- frame object
- hidden object
- image object
- mimeType object
- option object
- password object
- plugin object
- radio object
- reset object
- select object
- submit object
- text object
- textarea object
- link object
The above objects along with their properties, methods and syntax will be explained in later sections of this tutorial.
The following section will discuss link object and anchor object .
Link Object:
Link object is also a property of the document object. The link object is used to get or capture a text or image link present in a document. Similar to the anchor object having anchor array, all the links are contained in link array.
Properties of Link Object:
The link object has all the properties of the location object such as; hash, host, hostname, href, pathname, port, protocol and search. Additionally, link object has one more property called target property. The target property is used to identify the window where the document referenced by the link’s URL loads.
The most popularly used Internet Explorer browser, supports both anchor object and link object. Because of this association, the programmer might have a question in differentiating between the two. The href property of anchors object sets the anchor that represents the link and when the name property is set, it indicates a named anchor.
Methods of Link Object:
There is only one method present in the link object named handleEvent(). The argument given in this method is an event object, thus invoking the associated event handler for that event.
There is an anchor() method associated with the string object and, additionally, there is another method of string object called the link() method. The link() method of string object takes HREF attribute of link as parameter and creates a link to the given HREF.
This can be written as follows:
|
The above example generates HTML, thus creating a link for the current document with the given HREF.
Anchor Object:
The anchor object accesses the target of a hypertext link since it keeps track of all named offsets defined in respect to the HTML document. The anchor object has no associated properties, methods or events. It is actually a property of the document object. All the anchors of a particular document are contained in anchor array, so this is used for accessing anchor objects within a document. There is an anchor() method associated with the string object, used for creating an anchor in a current document.
This can be written as follows:
|
The above example creates the named anchor in the current document.
