JavaScript DOM Manipulation & Events

Topic 43: DOM Element Creation

Dynamically create and add HTML elements using JavaScript

3-Step Process

Step	Method	Purpose
1. Create	`document.createElement(tag)`	Creates new element
2. Configure	`.textContent, .style, .id`	Set properties/attributes
3. Add to DOM	`.append(), .prepend(), .insertBefore()`	Place element in page

Positioning Methods

Method	Where Element Goes
`.append()`	End of parent (last child)
`.prepend()`	Beginning of parent (first child)
`.insertBefore(new, ref)`	Before reference element
`.removeChild()`	Removes element from DOM

Examples in JavaScript File:

Example 1: Creating an h1 element
Example 2: Creating a list item (li) element

Topic 44: Event Listeners - Mouse Events

Make elements interactive with mouse events

Common Mouse Events

Event	When It Fires
`click`	Element is clicked
`mouseover`	Mouse enters element
`mouseout`	Mouse leaves element
`mousedown`	Mouse button pressed down
`mouseup`	Mouse button released

Interactive Demo

Click Me 😀

Hover over and click the box!

event.target: The element that triggered the event
Allows you to modify the clicked/hovered element dynamically

Topic 45: Event Listeners - Keyboard Events

Respond to keyboard input and arrow keys

Keyboard Events

Event	When It Fires
`keydown`	Key is pressed down
`keyup`	Key is released
`keypress`	Key is pressed (deprecated)

Arrow Keys Demo

😀

Use arrow keys to move the box!

Key Properties:
• event.key - The key that was pressed (e.g., "a", "Enter", "ArrowUp")
• event.preventDefault() - Prevents default browser action (e.g., scrolling)
• .startsWith() - Checks if string starts with specified characters

Topic 46: Show/Hide Elements

Two methods to hide elements: display and visibility

Method	Hidden Value	Visible Value	Takes Space?
`display`	`none`	`block`	❌ No (removes from layout)
`visibility`	`hidden`	`visible`	✅ Yes (keeps space)

When to use which:
• display: none - When you want elements below to move up
• visibility: hidden - When you want to keep the space occupied

Topic 47: DOM Selection Methods

Five ways to select HTML elements in JavaScript

Modern vs Legacy:
• querySelector/querySelectorAll are recommended for new code.
• The older methods (getElementById, getElementsByClassName, getElementsByTagName) exist for backwards compatibility.

Method	Selector	Returns	Can use .forEach()?
`getElementById()`	ID only (no #)	Single element or null	N/A (single element)
`getElementsByClassName()`	Class only (no .)	HTMLCollection (live)	❌ Need to convert to array
`getElementsByTagName()`	Tag name	HTMLCollection (live)	❌ Need to convert to array
`querySelector()` ⭐	Any CSS selector	FIRST matching element	N/A (single element)
`querySelectorAll()` ⭐	Any CSS selector	ALL elements (NodeList)	✅ Yes!

Quick Examples

// Method 1: By ID (fast, but ID only)
const header = document.getElementById("header");  // No # needed

// Method 2: By class (returns live collection)
const boxes = document.getElementsByClassName("box");  // No . needed
Array.from(boxes).forEach(box => { });  // Need to convert

// Method 3: By tag (returns live collection)
const paras = document.getElementsByTagName("p");

// Method 4: querySelector - FIRST match ⭐
const firstBox = document.querySelector(".box");  // Need . for class
const navBtn = document.querySelector("#nav > button");  // Complex CSS

// Method 5: querySelectorAll - ALL matches ⭐
const allBoxes = document.querySelectorAll(".box");
allBoxes.forEach(box => { });  // .forEach() works directly!

🎯 Best Practice: Use querySelector() and querySelectorAll() for modern code - they're more flexible and work with any CSS selector!

Topic 48: Quick Reference - Other Useful Methods

One-line explanations for commonly used methods

Method/Property	Simple Explanation
`.toFixed(n)`	Rounds number to n decimal places, returns string
`location.reload()`	Reloads/refreshes the current page
`isNaN()`	Checks if value is Not a Number (true/false)
`.scrollWidth`	Total width of content including hidden overflow
`.clientWidth`	Visible width of element (excludes scrollbar)
`.innerHTML`	Gets/sets HTML content inside element (including tags)
`getComputedStyle()`	Gets actual computed CSS styles of element
`DOMContentLoaded`	Event fires when HTML is fully loaded

Check the JavaScript file for usage examples of each method!

🎨 JavaScript DOM Manipulation & Events