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")
}
Top comments (0)