5 - JavaScript in the Browser

Introduction to the DOM (Document Object Model)

What is the DOM?

DOM: A representation of the structure of a web page as a tree of objects.
- Document: The entire HTML document.
- Object Model: Each part of the HTML document (elements, attributes, text) is represented as an object.
Access and Manipulate: JavaScript can interact with the DOM to modify content, styles, and structure dynamically.

Tree Structure

HTML Tree: Represents the hierarchy of elements on the page.
- Example Tree:
  <html> <body> <div> <h1>Title</h1> <p>Paragraph</p> </div> </body> </html>
- Nodes: Elements like <div>, <h1>, and <p> are nodes in the tree.
- Types of Nodes:
  - Element Nodes: Represent HTML elements (e.g., <div>).
  - Text Nodes: Contain text content inside elements.
  - Attribute Nodes: Represent attributes of HTML elements (e.g., id, class).

Selecting Elements in the DOM

Common Methods for Selecting Elements

getElementById(): Selects an element by its ID.

Example:

const title = document.getElementById("main-title");
console.log(title);  // Outputs the element with ID 'main-title'

getElementsByClassName(): Selects elements by their class name.

Example:

const items = document.getElementsByClassName("item");
console.log(items);  // Outputs an HTMLCollection of elements with class 'item'

getElementsByTagName(): Selects elements by their tag name.

Example:

const paragraphs = document.getElementsByTagName("p");
console.log(paragraphs);  // Outputs an HTMLCollection of all <p> elements

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

Example:

const header = document.querySelector(".header");
console.log(header);  // Outputs the first element with class 'header'

querySelectorAll(): Selects all elements that match a CSS selector.
- Example:
  const paragraphs = document.querySelectorAll("p"); console.log(paragraphs); // Outputs a NodeList of all <p> elements
- Difference: getElementsByClassName() and getElementsByTagName() return live collections, whereas querySelectorAll() returns a static NodeList.

Modifying the DOM

Changing Content

textContent and innerHTML: Modify the text or HTML content of an element.
- textContent: Changes only the text inside an element, safer against XSS.
- innerHTML: Allows you to insert HTML, but may expose to security risks if not handled properly.
- Example:
  const title = document.getElementById("main-title"); title.textContent = "New Title"; // Changes the text content of the title title.innerHTML = "<span>Updated Title</span>"; // Replaces HTML within the title
- Using outerHTML: Replaces the entire element, including the element itself.
  title.outerHTML = "<h2>Replaced Title</h2>";

Changing Attributes

setAttribute() and getAttribute(): Modify or get the attributes of an element.

Example:

const link = document.querySelector("a");
link.setAttribute("href", "https://www.example.com");
console.log(link.getAttribute("href"));  // Outputs: "https://www.example.com"

Direct Property Access: You can also modify attributes using direct property access.

Example:

link.href = "https://www.another-example.com";
console.log(link.href);  // Outputs: "https://www.another-example.com"

Changing Styles

Inline Styles: Modify CSS styles directly using the style property.

Example:

const box = document.querySelector(".box");
box.style.backgroundColor = "blue";
box.style.width = "200px";

Adding and Removing Classes: Use classList to manipulate CSS classes.

Methods:
- add(): Adds a new class.
- remove(): Removes a class.
- toggle(): Adds or removes a class depending on whether it is present.
- contains(): Checks if an element contains a specified class.

Example:

const button = document.querySelector("button");
button.classList.add("active");
button.classList.remove("inactive");
button.classList.toggle("highlight");  // Adds or removes the class 'highlight'
console.log(button.classList.contains("active"));  // true or false

DOM Events

What are Events?

Events: Actions that occur in the browser, such as clicks, key presses, or mouse movements.
- JavaScript can react to these events by executing functions known as event handlers.

Adding Event Listeners

addEventListener(): Attaches a function to run when a specific event occurs.

Syntax:

element.addEventListener(event, function, useCapture);

Example:

const button = document.querySelector("button");
button.addEventListener("click", function() {
    alert("Button clicked!");
});

Arrow Function as Event Listener:

button.addEventListener("click", () => {
    console.log("Button clicked with arrow function");
});

Removing Event Listeners: You can use removeEventListener() to remove a previously added listener.

function handleClick() {
    console.log("Button clicked!");
}
button.addEventListener("click", handleClick);
button.removeEventListener("click", handleClick);  // Removes the click event listener

Common Event Types

Mouse Events: click, dblclick, mousedown, mouseup, mouseover, mouseout

Keyboard Events: keydown, keyup, keypress

Example: Handling keyboard input

document.addEventListener("keydown", function(event) {
    console.log("Key pressed: " + event.key);
});

Form Events: submit, change, input, focus, blur

Example of a form event:

const form = document.querySelector("form");
form.addEventListener("submit", function(event) {
    event.preventDefault();  // Prevents the default form submission
    console.log("Form submitted");
});

Traversing the DOM

Parent, Child, and Sibling Relationships

Parent Node: The element directly above a given element in the DOM tree.

Example:

const item = document.querySelector(".item");
console.log(item.parentNode);  // Outputs the parent element of the item

Child Nodes: The elements directly inside a given element.
- children vs childNodes:
  - children: Returns an HTMLCollection of only the element nodes.
  - childNodes: Returns all child nodes, including text and comment nodes.
- Example:
  const list = document.querySelector("ul"); console.log(list.children); // Outputs an HTMLCollection of <li> children console.log(list.childNodes); // Outputs all types of child nodes

Sibling Nodes: Elements that share the same parent.

Example:

const firstItem = document.querySelector(".item");
console.log(firstItem.nextElementSibling);  // Outputs the next sibling element
console.log(firstItem.previousElementSibling);  // Outputs the previous sibling element

Creating and Removing Elements

Creating Elements

document.createElement(): Creates a new element that can be added to the DOM.

Adding Attributes and Content:

const newDiv = document.createElement("div");
newDiv.textContent = "Hello, I am a new div!";
newDiv.setAttribute("class", "new-div");
document.body.appendChild(newDiv);  // Adds the new div to the end of the <body>

Inserting Elements at Specific Positions:

insertBefore(): Inserts a new node before a specified existing node.

const list = document.querySelector("ul");
const newItem = document.createElement("li");
newItem.textContent = "New Item";
list.insertBefore(newItem, list.firstChild);  // Adds the new item as the first child of the list

Removing Elements

removeChild(): Removes a child element from its parent.

Example:

const list = document.querySelector("ul");
const listItem = document.querySelector("li");
list.removeChild(listItem);  // Removes the selected list item from the list

remove(): Directly removes an element from the DOM.

Example:

const box = document.querySelector(".box");
box.remove();  // Removes the box element

Clearing All Children: Removing all child nodes of an element.

Example:

const container = document.querySelector(".container");
while (container.firstChild) {
    container.removeChild(container.firstChild);
}

Summary

DOM: The Document Object Model represents the structure of a web page, allowing JavaScript to dynamically interact with HTML elements.
Selecting Elements: Use methods like getElementById(), querySelector(), and others to access elements.
Modifying Elements: Change content, attributes, and styles using properties like textContent, setAttribute(), and classList.
Events: Attach event listeners to handle user interactions, such as mouse clicks and keyboard presses.
Traversing and Manipulating the DOM: Understand parent, child, and sibling relationships, and learn how to create and remove elements dynamically.
Event Handling: Manage user input and interactions effectively using addEventListener() and related methods.

Next Chapter: JavaScript and Browser Storage

Previous4 - Advanced Concepts Next6 - JavaScript and Browser Storage

Last updated 1 year ago