DOM Manipulation

Selecting Elements: document.getElementById(), querySelector()
Creating & Modifying Elements: createElement(), appendChild(), innerHTML
DOM Tree & Nodes: Node, Element, Text, etc.

DOM Concepts

The Document Object Model (DOM) represents the structure of a webpage as a tree of nodes.
JavaScript can access and manipulate these nodes to dynamically change the web page.

<!-- index.html -->
<body>
  <div id="container"></div>

  <script>
    // Select an existing element by its ID
    const container = document.querySelector('#container');

    // Create a new <p> element
    const paragraph = document.createElement('p');
    paragraph.textContent = "Hello, DOM!";

    // Append the paragraph to the container
    container.appendChild(paragraph);
  </script>
</body>

createTextNode

In a browser, the document object is a global object that represents the DOM. window and document are global objects and can be accessed directly.

1️⃣ `window` in the Browser

In a web browser, window is the global object that represents the browser window.
It contains properties and methods related to the browser environment, such as document, localStorage, fetch, and more.

Example: Accessing `window` directly in a browser

javascript
CopyEdit
console.log(window); // Logs the global `window` object
console.log(window.innerWidth); // Logs the browser's viewport width
console.log(window.location.href); // Logs the current URL

Since window is global, you can omit window. and just write:

javascript
CopyEdit
console.log(location.href); // Equivalent to `window.location.href`

2️⃣ `document` in the Browser

document is a property of window (window.document).

DOM Concepts

1️⃣ window in the Browser

Example: Accessing window directly in a browser

2️⃣ document in the Browser

1️⃣ `window` in the Browser

Example: Accessing `window` directly in a browser

2️⃣ `document` in the Browser