javascriptDom.md

Instead of using JQuery for simple DOM manipulation, we can use Vanilla JS to achieve the same. JQuery is simply an abstraction library.

Select

// By ID
document.getElementById("id");

// By class
document.getElementsByClassName("class-name"); // Returns an array

// By tag
document.getElementsByTagName("li"); // Returns an array

Query Selector

Can select any element with the same command, but it grabs only the first one. This is pretty much JQuery if we replace document.querySelector with $.

document.querySelector("#id"); // ID
document.querySelector(".class-name"); // Class
document.querySelector("li"); // Tag

// Select specific element by Class
document.querySelector(".class-name:nth-child(2)"); // Just the 2nd one.

// Select all elements
document.querySelectorAll(".class-name");

// Select all elements by Class
document.querySelectorAll(".class-name:nth-child(odd)"); // Every other one. Returns array.

// Examples
document.querySelector("header .container");
document.querySelector("header h1");

Display

// Show the class.
element.className;

// Return an array of classes. The array can be modified with .add or .remove
element.classList;

Parent/Child

var element = document.getElementById("id");

// Parent
element.parentNode; // Selects the parent element.
element.parentNode.parentNode; // Ad infinitum

// Child
element.children; // Returns an array.
element.firstElementChild;
element.lastElementChild;

// Bad child. These include blank elements in the returned array.
element.childNode;
element.firstChild;
element.lastChild;

// Sibling
element.nextElementSibling; // Not nextSibling.
element.previousElementSibling; // Not previousSibling.

Change

var element = document.getElementById("id");

// Text
element.textContent = "New text";
element.innerText = "New text";

// HTML
element.innerHtml = "<div>Text</div>";

// CSS
element.style.borderBottom = "solid 1px red";

Common Elements

document - Whole DOM.
document.domain - The domain name.
document.URL - The URL.
document.title - The title.
document.doctype - The document type.
document.head - The head object.
document.body - The body object.
document.forms - Array of all forms.
document.links - Array of all links.
document.images - Array of all images.

Create / Remove

// Element
var element = document.createElement("div");

// Class
element.className = "class-name";

// classList
element.classList.add("class-name");
element.classList.remove("class-name");

// ID
element.id = "id";

// Attribute
element.setAttribute("title", "Hello World!");

// Text Node
var text = document.createTextNode("Hello World!");

// Add text to div
element.appendChild(text);

// Remove the child element
element.removeChild(text);

Bulk

let elements = document.querySelectorAll(".class el");
elements.forEach((el) => {
    el.className = "";
});

Events

Old way

<button onClick="buttonClick()">Click here</button>

function buttonClick() {
    console.log("Button clicked.");
}

Event Listener

<button id="button">Click here</button>

var button = document.getElementById("button");

button.addEventListener("click", buttonClick);

function buttonClick() {
    console.log("Button clicked.");
}

We can pass in the event and do all kinds of things with it, as it contains information such as the event type, mouse coordinates etc.

function buttonClick(e) {
    console.log(e); // Logs the event.
    console.log(e.target); // The clicked element.
    console.log(e.target.id); // Clicked element id.
    console.log(e.target.className); // Clicked element class.

    console.log(e.ctrlkey); // Is control pressed boolean. altkey, shiftkey...
}

Bulk Event Listeners

document.querySelectorAll("#myTable td").forEach((el) =>
    el.addEventListener("click", (e) => {
        // Here, `this` refers to the element the event was hooked on
        console.log("clicked", e.target.value);
    })
);

Thit creates a separate function for each cell; instead, you could share one function without losing any functionality.

function clickHandler(e) {
    // Here, `this` refers to the element the event was hooked on
    console.log("clicked", e.target.value);
}

document.querySelectorAll("#myTable td").forEach((el) => el.addEventListener("click", clickHandler));

Example

var hover = document.querySelectorAll(".hover");

// The functions are cointained inside another one to prevent execution on load.
hover.forEach((e) => e.addEventListener("mouseover", () => mouseOver(e)));
hover.forEach((e) => e.addEventListener("mouseout", () => mouseOut(e)));

function mouseOver(e) {
    e.classList.remove("w3-black");
    e.classList.add("w3-teal");
}

function mouseOut(e) {
    e.classList.remove("w3-teal");
    e.classList.add("w3-black");
}

Mouse

element.addEventListener("click", runEvent);

click- On click.
dblclick- On double click.
mousedown - On mouse button press.
mouseup - On mouse button release.
mouseenter - On hover over the element (parent) itself.
mouseover - On hover over the child elements.
mouseleave - On blur out of the element (parent) itself.
mouseout - On blur out of child elements.
mousemove - Any mouse movement.

Input

var itemInput = document.querySelector('input[type="text"]');
var form = document.querySelector("form");
var select = document.querySelector("select"); // A selector with options.

itemInput.addEventListener("keydown", runEvent); // Input events.
select.addEventListener("change", runEvent); // Selector events. "input" works the same.

function runEvent(e) {
    console.log(e.target.value); // Logs out the input value. Or selector value.
}

focus - On input click event.
blur - Click outside of input event.
copy, cut, paste - Input action events.
input - Any interaction with the input.

Submit

Submitting a form registers an event for a split second and it vanishes. In order to prevent that and make it persistent, we need to use the event method preventDefault() i.e. it stops the normal form submission to a file.

form.addEventListener("submit", runEvent);

function runEvent(e) {
    e.preventDefault();
    console.log(e.target.value); // Logs out the input value. Or selector value.
}

Keyboard

keydown - Any keyboard button press and release.
keyup - Button release.
keypress - Button press.

Custom Events

function send(channel, payload) {
    let event = new CustomEvent(channel, {
        detail: payload,
    });
    dispatchEvent(event);
}

function on(channel) {
    addEventListener(
        channel,
        (e) => {
            console.log(e.detail);
        },
        false
    ); // bubbles
}

on("foo"); // Register listener

send("foo", "bar"); // Catch event and print "bar"