In web development, JavaScript interacts with web pages through different Object Models. Two key object models that developers need to understand are the Browser Object Model (BOM) and the Document Object Model (DOM). These models define how JavaScript can access and manipulate web page elements and the browser itself.
The Browser Object Model (BOM) represents the browser window and provides a way for JavaScript to interact with and manipulate the browser environment, including the window itself, the browser history, the location of the page, and more. The BOM allows you to control aspects of the browser that are outside of the document content itself.
Window Object: The top-level object in the BOM, representing the browser window. Almost everything in the BOM is accessed through the window object.
// Accessing the window object
window.alert("Hello, World!");
Location Object: The location object is part of the window object and gives you access to the URL of the current page. You can use it to retrieve, change, or reload the URL.
console.log(window.location.href); // Get current URL
window.location.href = "https://www.example.com"; // Change URL
window.location.reload(); // Reload the page
History Object: The history object provides access to the browser’s history, allowing you to navigate through the pages in the browser's history.
window.history.back(); // Go back one page
window.history.forward(); // Go forward one page
window.history.go(-1); // Go back one page (alternative to back)
Navigator Object: The navigator object provides information about the browser, such as the browser name, version, and supported features (like JavaScript or cookies).
console.log(window.navigator.userAgent); // Get browser's user agent string
console.log(window.navigator.language); // Get browser's language
Screen Object: The screen object provides information about the user's screen, such as screen width, height, and color depth.
console.log(window.screen.width); // Get screen width
console.log(window.screen.height); // Get screen height
SetTimeout and SetInterval: These methods allow you to schedule tasks to be executed after a specific time or at regular intervals.
// Delay execution of a function by 2 seconds
setTimeout(() => { console.log("Hello after 2 seconds!"); }, 2000);
// Repeatedly execute a function every 1 second
setInterval(() => { console.log("Hello every second!"); }, 1000);
window.alert() - Displays an alert dialog.window.confirm() - Displays a confirmation dialog.window.prompt() - Displays a prompt dialog for user input.window.localStorage / window.sessionStorage - Used to store data on the client-side in key-value pairs.The Document Object Model (DOM) represents the structure of the HTML (or XML) document as an object-oriented model, allowing JavaScript to manipulate the content, structure, and styles of the web page. Essentially, the DOM is a map of the document where each HTML element is represented as a node.
DOM Hierarchy: The DOM is a tree-like structure, where each node represents an element, attribute, or piece of text. The top of this tree is the document object, and each HTML tag is a child node within the document.
For example, consider this HTML:
<html>
<body>
<h1>Welcome to JavaScript!</h1>
<p>This is an example paragraph.</p>
</body>
</html>
The DOM tree would look like this:
Document
├── HTML
└── BODY
├── H1 (Welcome to JavaScript!)
└── P (This is an example paragraph.)
Accessing Elements: JavaScript can access DOM elements using several methods:
id.
let element = document.getElementById("myElement");
let elements = document.getElementsByClassName("myClass");
let paragraphs = document.getElementsByTagName("p");
let element = document.querySelector("#myElement"); // First matching element
let elements = document.querySelectorAll(".myClass"); // All matching elements
Manipulating Elements: Once you access an element in the DOM, you can modify it:
Change Content: Modify the text or HTML inside an element.
let heading = document.getElementById("myHeading");
heading.innerHTML = "New Heading Content!";
heading.textContent = "Plain Text Content!";
Change Attributes: Modify attributes of an element, such as src or href.
let img = document.getElementById("myImage");
img.src = "new-image.jpg"; // Change image source
Add/Remove Elements: Add new elements or remove existing ones.
// Create a new element
let newDiv = document.createElement("div");
newDiv.innerHTML = "This is a new div!";
document.body.appendChild(newDiv); // Add to the body
// Remove an element
let oldDiv = document.getElementById("oldDiv");
oldDiv.remove(); // Removes the old div element
Event Handling: JavaScript can listen for events (such as clicks, mouse movements, etc.) on DOM elements, making it possible to create interactive web pages.
let button = document.getElementById("myButton");
button.addEventListener("click", function() {
alert("Button clicked!");
});
document.getElementById() - Returns a single element by its ID.document.createElement() - Creates a new element.document.querySelector() - Returns the first element that matches the specified CSS selector.element.style - Access and modify the inline styles of an element.element.classList - Add, remove, or toggle classes on an element.element.innerHTML / element.textContent - Access or modify the content inside an element.| Feature | Browser Object Model (BOM) | Document Object Model (DOM) |
|---|---|---|
| Focus | Interacts with the browser and window | Interacts with the structure of the HTML document |
| Scope | Includes objects like window, history, location, navigator |
Focuses on the document structure (HTML tags, text, etc.) |
| Purpose | Manage the browser environment (window, URL, etc.) | Manipulate and control the content and structure of the webpage |
| Example Usage | Changing the browser URL, navigating history | Accessing and modifying HTML elements |
The Browser Object Model (BOM) and Document Object Model (DOM) are both essential for JavaScript to interact with and manipulate the web environment. The BOM allows developers to control browser-related features like location and history, while the DOM enables direct interaction with the content and structure of the HTML page. Together, these models make it possible to create dynamic, interactive web pages and applications.
Open this section to load past papers