Browser Object Model

Author: sury4karmakar

Courses/IBM-JavaScript-Essentials/README.md

@@ -1623,3 +1623,76 @@ You can change the order of elements within a parent container, which affects th
   </script>
 </body>
 ```
+
+## Browser Object Model (BOM):
+
+The browser Object model BOM in JavaScript, is a crucial aspect that provides a structured way to interact with the web browser. It allows you to control browser behavior, manipulate the browser window, and access client-specific information. the BOM deals with the browser's environment. Some of the key components of BOM are as follows, window, document, navigator, screen, history, and location.
+
+- Window Object:
+
+The Global Window object represents the browser window or tab, and serves as the root of the BOM. All Global JavaScript objects and functions are part of the window object. The window object encompasses various properties and methods. For instance,
+
+1. window.alert(message) displays a simple alert dialog.
+2. window.confirm(message) shows a confirmation dialog.
+3. window.open(url, name, specs, replace) opens a new browser window or tab.
+4. you can also close the current window with a window.close().
+5. manipulate the current URL using the window.location
+
+The window object extends its functionalities with features like
+
+1. setTimeout, for delayed function execution.
+2. storage options, such as localStorage, and sessionStorage for client-side data storage.
+3. Additionally, window.history provides access to the browser session's history.
+
+- Navigator Object:
+
+The navigator object gives information about the client's browser, including the browser's name, version, and supported features.
+
+```js
+const browserName = navigator.appName;
+const browserVersion = navigator.appVersion;
+```
+
+- Screen Object:
+
+The screen object details the user's screen, including its dimensions and color depth.
+
+```js
+const screenWidth = screen.width;
+const screenHeight = screen.height;
+```
+
+- History Object:
+
+The history object represents the browser's session history, enabling navigation in the user's browsing history.
+
+```js
+history.back(); // navigates back one page
+
+history.forward(); // navigate forward one page
+```
+
+- Location Objet:
+
+The location object provides information about the current URL, and allows manipulation of the URL, facilitating redirection to other web pages.
+
+```js
+const currentURL = location.href;
+location.href = "https://example.com";
+```
+
+- DOM vs BOM:
+
+1. The DOM represents a web page's structure and content, offering a hierarchical, easy access and manipulation model. Meanwhile, the BOM provides access to browser specific features, settings, and behaviors, enabling control over windows, navigation, and user interactions.
+
+2. The DOM consists of a tree-like structure of HTML elements, attributes, and text nodes, representing the web page's content, accessible through the document object. The BOM includes various objects and features like a window, navigator, screen, history, and location, providing access to browser-specific information and functionalities.
+
+3. The DOM allows dynamic manipulation of HTML elements, including text, attributes, styles, and structure. Meanwhile, the BOM goes beyond content, empowering control over browser features like alerts, windows, history, and client information.
+
+4. DOM is organized hierarchically and represents HTML elements, attributes, and text nodes as notes, forming a structured layout. In contrast, the BOM lacks a hierarchical structure with loosely related objects offering independent access.
+
+5. Accessing the DOM involves interacting through the document object, like using document.getElementById Element ID. For the BOM, direct interaction with objects occurs through the window object, for example, window.alert etc.
+
+6. DOM usage includes modifying text content, adding or removing HTML elements, updating attributes, changing styles, and handling events within the web page. BOM usage includes opening new browser windows or tabs, controlling browser history, displaying alerts, managing client information, and handling browser-specific tasks.
+
+##