JavaScript DOM, Events, Array Methods & RegEx

DOM Model – Connecting JavaScript to HTML

What is the DOM?

The Document Object Model (DOM) is a programming interface that represents HTML documents as a tree of objects. JavaScript can manipulate these objects to change content, structure, and styling dynamically.

DOM Tree Structure

<!DOCTYPE html>
<html>                    ← Document
  <head>                  ← Element
    <title>My Page</title> ← Element with Text Node
  </head>
  <body>                  ← Element
    <h1>Welcome</h1>      ← Element with Text Node
    <p id="intro">Hello</p> ← Element with Attribute and Text Node
  </body>
</html>

Selecting DOM Elements

1. By ID (Most Specific)

// HTML: <div id="main-content">Hello World</div>
let element = document.getElementById("main-content");
console.log(element.textContent); // "Hello World"

// Short way (not recommended for production)
let element = main-content; // Works but avoid this

2. By Class Name

// HTML: <p class="highlight">Text 1</p>
//       <p class="highlight">Text 2</p>
let elements = document.getElementsByClassName("highlight");
console.log(elements.length); // 2
console.log(elements[0].textContent); // "Text 1"

// Convert to regular array for array methods
let elementsArray = Array.from(elements);
elementsArray.forEach(el => console.log(el.textContent));

3. By Tag Name

// HTML: <p>Para 1</p>
//       <p>Para 2</p>
let paragraphs = document.getElementsByTagName("p");
console.log(paragraphs.length); // 2

// Get all images
let images = document.getElementsByTagName("img");

4. CSS Selectors (Most Flexible)

// Single element - first match
let element = document.querySelector("#main-content"); // By ID
let element = document.querySelector(".highlight");    // By Class
let element = document.querySelector("p");             // By Tag
let element = document.querySelector("div > p");       // Complex selector

// Multiple elements - all matches
let elements = document.querySelectorAll(".highlight");
let elements = document.querySelectorAll("p");
let elements = document.querySelectorAll("div.container p");

Manipulating Element Content

1. Text Content

let heading = document.getElementById("title");

// Get text content
console.log(heading.textContent);   // Gets plain text
console.log(heading.innerText);     // Gets visible text (respects CSS)

// Set text content
heading.textContent = "New Title";
heading.innerText = "Another Title";

2. HTML Content

let container = document.getElementById("content");

// Get HTML content
console.log(container.innerHTML);

// Set HTML content
container.innerHTML = "<p>New <strong>HTML</strong> content</p>";
container.innerHTML += "<p>Added paragraph</p>"; // Append

// Security note: Be careful with innerHTML and user input

Creating and Modifying Elements

1. Creating Elements

// Create new elements
let newParagraph = document.createElement("p");
let newImage = document.createElement("img");
let newDiv = document.createElement("div");

// Set content and attributes
newParagraph.textContent = "This is a new paragraph";
newImage.src = "image.jpg";
newImage.alt = "Description";
newDiv.innerHTML = "<h3>New Section</h3><p>Content here</p>";

2. Adding Elements to DOM

let container = document.getElementById("container");
let newElement = document.createElement("p");
newElement.textContent = "New content";

// Append to end
container.appendChild(newElement);

// Insert at beginning
container.insertBefore(newElement, container.firstChild);

// Insert at specific position
container.insertBefore(newElement, container.children[2]);

// Modern methods
container.append(newElement);           // Can append multiple elements/text
container.prepend(newElement);          // Insert at beginning
container.before(newElement);           // Insert before container
container.after(newElement);            // Insert after container

3. Removing Elements

let elementToRemove = document.getElementById("old-content");

// Remove element
elementToRemove.remove();               // Modern way
elementToRemove.parentNode.removeChild(elementToRemove); // Old way

// Remove all children
let container = document.getElementById("container");
container.innerHTML = "";               // Quick but loses event listeners

// Better way to remove all children
while (container.firstChild) {
    container.removeChild(container.firstChild);
}

Event Handling – Making Websites Interactive

What are Events?

Events are actions that happen in the browser – like clicks, key presses, mouse movements, form submissions, etc. Event handling lets JavaScript respond to these actions.

Adding Event Listeners

1. addEventListener Method (Recommended)

// HTML: <button id="myButton">Click Me</button>
let button = document.getElementById("myButton");

// Basic click event
button.addEventListener("click", function() {
    alert("Button was clicked!");
});

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

// Named function
function handleClick() {
    console.log("Button clicked with named function!");
}
button.addEventListener("click", handleClick);

2. Inline Event Handlers (HTML)

<!-- Not recommended for complex applications -->
<button onclick="alert('Clicked!')">Click Me</button>
<button onclick="handleClick()">Click Me</button>

<script>
function handleClick() {
    alert("Function called from HTML!");
}
</script>

3. Element Property Method

let button = document.getElementById("myButton");

// Only one event handler per element
button.onclick = function() {
    alert("Clicked!");
};

// This overwrites the previous handler
button.onclick = function() {
    alert("New handler!");
};

Common Event Types

1. Mouse Events

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

// Click events
element.addEventListener("click", () => console.log("Clicked"));
element.addEventListener("dblclick", () => console.log("Double clicked"));

// Mouse movement
element.addEventListener("mouseenter", () => console.log("Mouse entered"));
element.addEventListener("mouseleave", () => console.log("Mouse left"));
element.addEventListener("mouseover", () => console.log("Mouse over"));
element.addEventListener("mousemove", (e) => {
    console.log(`Mouse at: ${e.clientX}, ${e.clientY}`);
});

// Mouse buttons
element.addEventListener("mousedown", () => console.log("Mouse button pressed"));
element.addEventListener("mouseup", () => console.log("Mouse button released"));

2. Keyboard Events

let input = document.getElementById("textInput");

// Key events
input.addEventListener("keydown", (e) => {
    console.log(`Key pressed: ${e.key}`);
    console.log(`Key code: ${e.keyCode}`);
});

input.addEventListener("keyup", (e) => {
    console.log(`Key released: ${e.key}`);
});

input.addEventListener("keypress", (e) => {
    console.log(`Key pressed (deprecated): ${e.key}`);
});

// Specific key detection
document.addEventListener("keydown", (e) => {
    if (e.key === "Enter") {
        console.log("Enter key pressed");
    }
    if (e.key === "Escape") {
        console.log("Escape key pressed");
    }
    if (e.ctrlKey && e.key === "s") {
        e.preventDefault(); // Prevent browser save
        console.log("Ctrl+S pressed");
    }
});

3. Form Events

let form = document.getElementById("myForm");
let input = document.getElementById("email");

// Form submission
form.addEventListener("submit", (e) => {
    e.preventDefault(); // Prevent default form submission
    console.log("Form submitted");
    
    // Validate and process form data
    let formData = new FormData(form);
    console.log(formData.get("email"));
});

// Input events
input.addEventListener("input", (e) => {
    console.log(`Current value: ${e.target.value}`);
});

input.addEventListener("change", (e) => {
    console.log(`Value changed to: ${e.target.value}`);
});

input.addEventListener("focus", () => {
    console.log("Input focused");
    input.style.border = "2px solid blue";
});

input.addEventListener("blur", () => {
    console.log("Input lost focus");
    input.style.border = "1px solid gray";
});

4. Window Events

// Page load
window.addEventListener("load", () => {
    console.log("Page fully loaded");
});

// DOM ready (use DOMContentLoaded instead of load for faster execution)
document.addEventListener("DOMContentLoaded", () => {
    console.log("DOM is ready");
    // Initialize your app here
});

// Window resize
window.addEventListener("resize", () => {
    console.log(`Window size: ${window.innerWidth} x ${window.innerHeight}`);
});

// Before page unload
window.addEventListener("beforeunload", (e) => {
    // Show confirmation dialog
    e.preventDefault();
    e.returnValue = "";
});

Map, Filter & Reduce – Powerful Array Methods

What are these methods?

These are functional programming methods that create new arrays or values from existing arrays without mutating the original array.

Map Method – Transform Each Element

Basic Map Usage

let numbers = [1, 2, 3, 4, 5];

// Transform each number
let doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

// Original array unchanged
console.log(numbers); // [1, 2, 3, 4, 5]

// With traditional function
let squared = numbers.map(function(num) {
    return num * num;
});
console.log(squared); // [1, 4, 9, 16, 25]

Practical Map Examples

// Array of objects
let users = [
    { name: "Alice", age: 25, city: "New York" },
    { name: "Bob", age: 30, city: "Los Angeles" },
    { name: "Charlie", age: 35, city: "Chicago" }
];

// Extract just names
let names = users.map(user => user.name);
console.log(names); // ["Alice", "Bob", "Charlie"]

Filter Method – Select Elements

Basic Filter Usage

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// Filter even numbers
let evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4, 6, 8, 10]

// Filter numbers greater than 5
let bigNumbers = numbers.filter(num => num > 5);
console.log(bigNumbers); // [6, 7, 8, 9, 10]

// Multiple conditions
let evenAndBig = numbers.filter(num => num % 2 === 0 && num > 5);
console.log(evenAndBig); // [6, 8, 10]

Practical Filter Examples

let products = [
    { name: "Laptop", price: 999, category: "Electronics", inStock: true },
    { name: "Shirt", price: 29, category: "Clothing", inStock: false },
    { name: "Phone", price: 699, category: "Electronics", inStock: true },
    { name: "Book", price: 15, category: "Education", inStock: true },
    { name: "Headphones", price: 199, category: "Electronics", inStock: false }
];

// Filter by category
let electronics = products.filter(product => product.category === "Electronics");
console.log(electronics); // All electronics items

// Filter by price range
let affordableItems = products.filter(product => product.price < 100);
console.log(affordableItems);

// Filter available items
let availableItems = products.filter(product => product.inStock);
console.log(availableItems);

// Complex filtering
let affordableElectronics = products.filter(product => 
    product.category === "Electronics" && 
    product.price < 500 && 
    product.inStock
);

Reduce Method – Combine Elements

Basic Reduce Usage

let numbers = [1, 2, 3, 4, 5];

// Sum all numbers
let sum = numbers.reduce((total, current) => total + current, 0);
console.log(sum); // 15

// Product of all numbers
let product = numbers.reduce((total, current) => total * current, 1);
console.log(product); // 120

// Find maximum
let max = numbers.reduce((max, current) => current > max ? current : max);
console.log(max); // 5

Regular Expressions – Pattern Matching

What are Regular Expressions?

Regular Expressions (RegEx) are patterns used to match character combinations in strings. They’re powerful tools for validation, searching, and text manipulation.

Creating Regular Expressions

1. Literal Notation

// Between forward slashes
let pattern1 = /hello/;
let pattern2 = /[0-9]+/;
let pattern3 = /^[a-zA-Z]+$/;

2. Constructor Notation

// With RegExp constructor
let pattern1 = new RegExp("hello");
let pattern2 = new RegExp("[0-9]+");
let pattern3 = new RegExp("^[a-zA-Z]+$");

// Useful when pattern comes from variable
let searchTerm = "hello";
let dynamicPattern = new RegExp(searchTerm);

Basic RegEx Patterns

Character Classes

// Specific characters
let pattern = /cat/;        // Matches "cat"
let pattern = /[abc]/;      // Matches any single a, b, or c
let pattern = /[a-z]/;      // Matches any lowercase letter
let pattern = /[A-Z]/;      // Matches any uppercase letter
let pattern = /[0-9]/;      // Matches any digit
let pattern = /[a-zA-Z0-9]/; // Matches any alphanumeric character

// Negated character classes
let pattern = /[^0-9]/;     // Matches any non-digit
let pattern = /[^abc]/;     // Matches any character except a, b, c

Predefined Character Classes

let pattern = /\d/;         // Digit [0-9]
let pattern = /\D/;         // Non-digit [^0-9]
let pattern = /\w/;         // Word character [a-zA-Z0-9_]
let pattern = /\W/;         // Non-word character [^a-zA-Z0-9_]
let pattern = /\s/;         // Whitespace [ \t\n\r\f\v]
let pattern = /\S/;         // Non-whitespace [^ \t\n\r\f\v]
let pattern = /./;          // Any character except newline

Quantifiers

let pattern = /a*/;         // Zero or more 'a's
let pattern = /a+/;         // One or more 'a's
let pattern = /a?/;         // Zero or one 'a'
let pattern = /a{3}/;       // Exactly 3 'a's
let pattern = /a{2,5}/;     // Between 2 and 5 'a's
let pattern = /a{3,}/;      // 3 or more 'a's

Anchors

let pattern = /^hello/;     // Starts with "hello"
let pattern = /world$/;     // Ends with "world"
let pattern = /^hello$/;    // Exactly "hello"
let pattern = /\bword\b/;   // Word boundary

RegEx Flags

// Case insensitive
let pattern = /hello/i;

// Global (find all matches)
let pattern = /hello/g;

// Multiline
let pattern = /^hello/m;

// Combined flags
let pattern = /hello/gi;    // Global and case insensitive

Using RegEx with JavaScript

test() Method – Check if Pattern Matches

let emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

console.log(emailPattern.test("user@example.com"));    // true
console.log(emailPattern.test("invalid-email"));       // false

let phonePattern = /^\d{3}-\d{3}-\d{4}$/;
console.log(phonePattern.test("123-456-7890"));        // true
console.log(phonePattern.test("123-45-67890"));        // false

match() Method – Extract Matches

let text = "My phone number is 123-456-7890 and my friend's is 987-654-3210";
let phonePattern = /\d{3}-\d{3}-\d{4}/g;

let matches = text.match(phonePattern);
console.log(matches); // ["123-456-7890", "987-654-3210"]

// Without global flag - returns detailed info
let singleMatch = text.match(/\d{3}-\d{3}-\d{4}/);
console.log(singleMatch);
// ["123-456-7890", index: 19, input: "My phone...", groups: undefined]

replace() Method – Replace Matches

let text = "Hello world, hello universe!";

// Replace first occurrence
let result1 = text.replace(/hello/i, "Hi");
console.log(result1); // "Hi world, hello universe!"

// Replace all occurrences
let result2 = text.replace(/hello/gi, "Hi");
console.log(result2); // "Hi world, Hi universe!"

// Replace with function
let result3 = text.replace(/\b\w+\b/g, function(word) {
    return word.toUpperCase();
});
console.log(result3); // "HELLO WORLD, HELLO UNIVERSE!"

search() Method – Find Position

let text = "JavaScript is awesome";

console.log(text.search(/script/i));    // 4
console.log(text.search(/python/i));    // -1 (not found)

split() Method – Split with RegEx

let text = "apple,banana;orange:grape";

// Split by various delimiters
let fruits = text.split(/[,;:]/);
console.log(fruits); // ["apple", "banana", "orange", "grape"]

// Split by whitespace
let sentence = "Hello    world   JavaScript";
let words = sentence.split(/\s+/);
console.log(words); // ["Hello", "world", "JavaScript"]

Common RegEx Patterns

Email Validation

function isValidEmail(email) {
    let pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return pattern.test(email);
}

console.log(isValidEmail("user@example.com"));      // true
console.log(isValidEmail("invalid.email"));         // false

Phone Number Validation

function isValidPhone(phone) {
    // Matches: (123) 456-7890, 123-456-7890, 1234567890
    let pattern = /^(\(\d{3}\)\s?|\d{3}[-.]?)\d{3}[-.]?\d{4}$/;
    return pattern.test(phone);
}

console.log(isValidPhone("(123) 456-7890"));        // true
console.log(isValidPhone("123-456-7890"));          // true
console.log(isValidPhone("1234567890"));            // true

Password Validation

function isStrongPassword(password) {
    // At least 8 chars, 1 uppercase, 1 lowercase, 1 digit, 1 special char
    let pattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
    return pattern.test(password);
}

console.log(isStrongPassword("Password123!"));     // true
console.log(isStrongPassword("weakpass"));         // false

Quick Reference

DOM Selection

javascript

document.getElementById('id')
document.querySelector('.class')
document.querySelectorAll('tag')

DOM Manipulation

javascript

element.textContent = 'text'
element.innerHTML = '<p>html</p>'
element.style.property = 'value'
element.classList.add('class')

Events

javascript

element.addEventListener('click', function)
event.preventDefault()
event.target // element that triggered

Array Methods

javascript

arr.map(item => transform(item))
arr.filter(item => condition)
arr.reduce((acc, item) => combine, initial)

Regular Expressions

javascript

/pattern/flags
pattern.test(string)
string.match(pattern)
string.replace(pattern, replacement)

Common RegEx Patterns

javascript

/^[^\s@]+@[^\s@]+\.[^\s@]+$/     // Email
/^\d{3}-\d{3}-\d{4}$/            // Phone (XXX-XXX-XXXX)
/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/ // Password with mixed case & digit

Table of Contents

DOM Model – Connecting JavaScript to HTML

What is the DOM?

DOM Tree Structure

Selecting DOM Elements

1. By ID (Most Specific)

2. By Class Name

3. By Tag Name

4. CSS Selectors (Most Flexible)

Manipulating Element Content

1. Text Content

2. HTML Content

Creating and Modifying Elements

1. Creating Elements

2. Adding Elements to DOM

3. Removing Elements

Event Handling – Making Websites Interactive

What are Events?

Adding Event Listeners

1. addEventListener Method (Recommended)

2. Inline Event Handlers (HTML)

3. Element Property Method

Common Event Types

1. Mouse Events

2. Keyboard Events

3. Form Events

4. Window Events

Map, Filter & Reduce – Powerful Array Methods

What are these methods?

Map Method – Transform Each Element

Basic Map Usage

Practical Map Examples

Filter Method – Select Elements

Basic Filter Usage

Practical Filter Examples

Reduce Method – Combine Elements

Basic Reduce Usage

Regular Expressions – Pattern Matching

What are Regular Expressions?

Creating Regular Expressions

1. Literal Notation

2. Constructor Notation

Basic RegEx Patterns

Character Classes

Predefined Character Classes

Quantifiers

Anchors

RegEx Flags

Using RegEx with JavaScript

test() Method – Check if Pattern Matches

match() Method – Extract Matches

replace() Method – Replace Matches

search() Method – Find Position

split() Method – Split with RegEx

Common RegEx Patterns

Email Validation

Phone Number Validation

Password Validation

Quick Reference

DOM Selection

DOM Manipulation

Events

Array Methods

Regular Expressions

Common RegEx Patterns

Related Posts

React.js API Integration – Random Quote

React.js-Routing, useState & useEffect

React.js – Props, State & Event Handling

Leave a ReplyCancel Reply