Browser Objects
Browser Objects are objects provided by the web browser that allow JavaScript to interact with the browser environment.
These objects are not part of core JavaScript. They are provided by the Browser Object Model (BOM).
In simple terms:
Browser Objects help JavaScript control the browser and access browswer related information
What is Browser Object Model (BOM)?
The Browser Object Model (BOM) represents the browser as an object hierarchy.
It allows JavaScript to:
- Control browser windows
- Navigate pages
- Access browser information
- Display alerts and messages
Main Browser Objects
The most commonly used browser objects are:
- Window Object
- Document Object
- History Object
- Navigator Object
- Location Object
- Screen Object
1. Window Object
The Window object is the top-level object in BOM. All browser objects are part of the window.
Example
window.alert("Welcome to JavaScript");- alert() shows a popup message
- window keyword is optional
Console Output Example
console.log("Hello Browser");Displays message in browser console
2. Document Object
The Document object represents the HTML document loaded in the browser.
It allows JavaScript to:
- Access HTML elements
- Modify content and styles
Example
document.title = "My Website";3. History Object
The History object allows navigation through browser history.
Example
Example
history.back();history.forward();- Navigate back or forward
- Commonly used in SPA navigation
4. Navigator Object
The Navigator object provides information about the browser.
Example
Example
console.log(navigator.userAgent);- Detect browser and OS
- Used for feature detection
5. Location Object
The Location object provides information about the current URL.
Example
Example
console.log(location.href);
Redirect Page
location.href = "https://example.com";6. Screen Object
The Screen object gives information about the user’s screen.
Example
Useful for responsive design logic
Browser Objects Relationship
Difference Between Browser Objects and JavaScript Objects
console.log(screen.width);console.log(screen.height);Useful for responsive design logic
Browser Objects Relationship
window ├── document ├── history ├── navigator ├── location └── screenDifference Between Browser Objects and JavaScript Objects
| Feature | JavaScript Objects | Browser Objects |
|---|---|---|
| Provided by | JavaScript engine | Browser |
| Environment | Any | Browser only |
| Example | Array, Object | window, history |
Common Use Cases
- Showing alerts and messages
- Navigating pages
- Detecting browser features
- Managing URLs
- Responsive UI handling
Two Minute Drill
- Browser Objects interact with the browser
- BOM controls browser behavior
- Window is the top level object
- History manages navigation
- Navigator provides browser info
- Location handles URLs
- Screen gives display info
Need more clarification?
Drop us an email at career@quipoinfotech.com