Coding Tutorials Blog

Javascript DOM & jQuery Cheatsheet 2022

March 12, 2022

Join the slack and discord community at devNursery.com

DOM/jQuery Video Playlist

Window Object

Represents the entire browser window

action syntax notes
what browser is user using window.navigator Read More
store data in localStorage window.localStorage.setItem("name", JSON.stringify(myObject)) Read More
get data from localStorage const data = JSON.parse(window.localStorage.getItem("name")) Read More
remove data from localStorage window.localStorage.removeItem("name") Read More
send user to another webpage window.location = "https://www.google.com" Read More

selecting and creating DOM Nodes

The document object represents the document defined by the <doctype!> tag, essentially this of document as an object representing everything within the <html> tags in your html file.

action plain vanilla dom jquery Notes
select an element based on CSS selector document.querySelector("#id") $("#id")
select multiple elements based on CSS selector document.querySelectorAll(".class") $(".class")
run code after dom loads window.addEventListener("load", () => {...code here}) $(() => {...code here}) You could also either move script tag to bottom of body or use defer keyword in script tag
Create a new element document.createElement("h1") $("<h1>") with jQuery you could also add attributes in the string like $("<h1 id='cheese'>")

Manipulating DOM nodes

Below are ways to work with selected elements. el will represent an elements selected with plain javascript like const el = document.querySelector("h1") and $el will represent an element selected with jQuery such as const $el = $("h1").

action plain vanilla dom jquery Notes
edit text el.innerText = "new value" $el.text("new value")
edit html el.innerHTML = "<h1>new value</h1>" $el.html("<h1>new value</h1>")
add a css class el.classList.add("className") $el.addClass("className")
remove a css class el.classList.remove("className") $el.removeClass("className")
toggle a css class el.classList.toggle("className") $el.toggleClass("className")
get the value of an attribute el.getAttribute("id") $el.attr("id")
set the value of an attribute el.setAttribute("id", "new value") $el.attr("id", "new value")
remove an attribute el.removeAttribute("id") $el.removeAttr("id")
get the value of a css property el.style.backgroundColor $el.css("background-color") every css property in the style object has camel case names
change a css property el.style.backgroundColor = "black" $el.css("background-color", "black") every css property in the style object has camel case names
empty the contents of the element el.innerHTML = "" $el.empty()
remove the element from DOM el.remove() $el.remove()
append element as last child of another node target.append(el) $target.append(el)
prepend element as last child of another node target.prepend(el) $target.prepend(el)
insert element before another element target.before(el) $target.before($el)
insert element after another element target.after(el) $target.after($el)
listen for events on an element el.addEventListener("event", (event) => {...what happens here}) $el.on("event", (event) => {...what happens here})

Looping Over Data to Create Elements

Plain Vanilla

// array of data
const cheeses = ["gouda", "munster", "brie"]

// select existing ul element, add an li for each cheese
const ul = document.querySelector("ul")
for (cheese of cheeses){
    //create li
    const li = document.createElement("li")
    // add text to the li
    li.innerText = cheese
    // append to ul
    ul.append(li)
}

jQuery

// array of data
const cheeses = ["gouda", "munster", "brie"]

// select existing ul element, add an li for each cheese
const $ul = $("ul")
for (cheese of cheeses){
    //create li
    const $li = $("<li>")
    // add text to the li
    $li.text(cheese)
    // append to ul
    $ul.append($li)
}

Looping Over Elements to Modify Theme

Plain Vanilla

// Select all h1's on the page to make them pink
const h1s = document.querySelectorAll("h1")

// loop over h1s
for (h1 of h1s){
    h1.style.color = "pink"
}

jQuery

// Select all h1's on the page to make them pink
const $h1s = $("h1")

// loop over h1s
for (h1 of $h1s){
    // turn the h1 node into a jQuery object
    const $h1 = $(h1)
    // make it pink
    const $h1.css("color", "pink")
}

© alexmercedcoder.dev 2020