Javascript DOM & jQuery Cheatsheet 2022
Join the slack and discord community at devNursery.com
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")
}