DOM & BOM Methods

JavaScript is a versatile programming language that can be used to manipulate web pages. Two important concepts in JavaScript development are the Document Object Model (DOM) and the Browser Object Model (BOM).

DOM (Document Object Model):

The Document Object Model (DOM) is a programming interface for web documents. It represents the structure of HTML and XML documents as a tree-like structure, where each node represents an element, attribute, or text within the document. JavaScript can interact with the DOM to dynamically manipulate the content, structure, and style of web pages.

DOM Methods:

DOM provides a wide range of methods to interact with elements in the document. Some of the common DOM methods include:

1. getElementById(): Finds an element by its ID attribute.

   let element = document.getElementById("myElement");

2. getElementsByClassName(): Finds elements by their class name.

   let elements = document.getElementsByClassName("myClass");

3. getElementsByTagName(): Finds elements by their tag name.

   let elements = document.getElementsByTagName("div");

4. querySelector(): Finds the first element that matches a CSS selector.

   let element = document.querySelector("#myElement .myClass");

5. querySelectorAll(): Finds all elements that match a CSS selector.

   let elements = document.querySelectorAll("div.myClass");

6. createElement(): Creates a new element.

   let newElement = document.createElement("div");

7. appendChild(): Appends a child node to an element.

   parentElement.appendChild(newElement);

8. removeChild(): Removes a child node from an element.

   parentElement.removeChild(childElement);

9. setAttribute(): Sets the value of an attribute on an element.

   element.setAttribute("id", "newId");

10. addEventListener(): Attaches an event listener to an element.

    element.addEventListener("click", handleClick);

BOM (Browser Object Model):

The Browser Object Model (BOM) represents the browser window and provides objects and methods to interact with browser functionality beyond the document content. It includes objects like window, navigator, screen, location, and history.

BOM Features:

1. window object: Represents the browser window and provides properties and methods for controlling it.

2. navigator object: Provides information about the browser and its capabilities.

3. screen object: Provides information about the user's screen.

4. location object: Represents the URL of the current page and provides methods for navigating to other pages.

5. history object: Represents the browser's history stack and allows navigating back and forward.

6. setTimeout() and setInterval(): Functions for executing code asynchronously after a specified delay or at regular intervals.

7. alert(), confirm(), and prompt(): Functions for displaying dialog boxes to the user.

8. localStorage and sessionStorage: Objects for storing data persistently or temporarily in the browser.

Understanding both DOM and BOM is essential for web development as they provide the foundation for creating dynamic and interactive web applications.