The Document Object Model (DOM) allows JavaScript to interact with and modify HTML content. This post covers essential DOM operations and event handling.

Selecting Elements

getElementById

var element = document.getElementById('demo');

querySelectorAll

Use CSS selectors to find elements:

document.querySelectorAll('p#demo');
document.querySelectorAll('.className');
document.querySelectorAll('div > p');

Modifying Elements

innerHTML

element.innerHTML = 'Hello JavaScript';

document.write

document.write(5 + 6);  // Writes 11 to the page

Warning: Using document.write() after the page loads will overwrite the entire document.

Event Handling

Event Bubbling vs Capturing

Events can propagate in two directions:

  • Bubbling (default): Inner element’s event is handled first, then outer elements
  • Capturing: Outer element’s event is handled first, then inner elements
// useCapture parameter: true for capturing, false for bubbling
document.getElementById("myP").addEventListener("click", myFunction, true);

addEventListener

element.addEventListener('click', function() {
    console.log('Clicked!');
});

Programmatically Triggering Click

function clickButton(obj) {
    var evt = document.createEvent("MouseEvents");
    evt.initMouseEvent("click", true, true, window,
        0, 0, 0, 0, 0, false, false, false, false, 0, null);
    var cancelled = !obj.dispatchEvent(evt);
}

Working with Forms

Accessing Form Values

Forms and their elements can be accessed by name:

document.forms["myForm"]["fname"].value;

Form Validation

Check if an input is valid (for required, min, max, etc.):

var input = document.getElementById("id1");

if (input.checkValidity()) {
    // Input is valid
} else {
    console.log(input.validationMessage);
}

// Check for specific validation errors
if (document.getElementById("id1").validity.rangeOverflow) {
    console.log("Value too large");
}

Location and Navigation

Getting URL Anchor

window.location.hash.substr(1);  // Returns anchor without #

Parsing URL Parameters

function getUrlParameter(key, searchString) {
    if (location.search) {
        var search = searchString || location.search;
        var parts = search.substring(1).split('&');

        for (var i = 0; i < parts.length; i++) {
            var pair = parts[i].split('=');
            if (pair[0] === key) {
                return pair[1];
            }
        }
    }
    return null;
}

// Usage
var value = getUrlParameter('page');  // Gets ?page=X value

Date and Time

Creating Dates

new Date();                              // Current date/time
new Date(milliseconds);                  // From milliseconds
new Date("October 13, 2014 11:13:00");   // From string
new Date(2015, 2, 25, 12, 0, 0, 0);      // year, month, day, h, m, s, ms

Date Formats

Type Example
ISO Date “2015-03-25” (International Standard)
Short Date “03/25/2015”
Long Date “Mar 25 2015” or “25 Mar 2015”
Full Date “Wednesday March 25 2015”

Date Methods

var date = new Date();
date.getYear();      // Returns year - 1900 (117 for 2017)
date.getFullYear();  // Returns full year (2017)
date.getMonth();     // Returns month (0-11, 11 = December)

setTimeout and setInterval

// Execute once after delay
setTimeout(function() {
    alert("Hello");
}, 3000);  // 3 seconds

// Execute repeatedly
var intervalId = setInterval(frame, 5);  // Every 5ms

function frame() {
    if (/* condition */) {
        clearInterval(intervalId);  // Stop the interval
    } else {
        // Do something
    }
}

Cookies

Setting Cookies

function setCookie(name, value, days) {
    var d = new Date();
    d.setTime(d.getTime() + (days * 24 * 60 * 60 * 1000));
    var expires = "expires=" + d.toGMTString();
    document.cookie = name + "=" + value + ";" + expires + ";path=/";
}

Getting Cookies

function getCookie(name) {
    var cookieName = name + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var cookies = decodedCookie.split(';');

    for (var i = 0; i < cookies.length; i++) {
        var cookie = cookies[i].trim();
        if (cookie.indexOf(cookieName) === 0) {
            return cookie.substring(cookieName.length);
        }
    }
    return "";
}

Including External JavaScript

Script Tag

<script src="myScript.js"></script>

WYSIWYG Editors

WYSIWYG stands for “What You See Is What You Get”. These editors allow content to be edited in a form that resembles its appearance when displayed.

Popular JavaScript WYSIWYG editors include:

  • TinyMCE
  • CKEditor
  • Quill
  • Draft.js

DOM manipulation and event handling are fundamental skills for creating interactive web applications. Understanding these concepts enables you to build dynamic, responsive user interfaces.