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)