Vanilla JavaScript: A cheatsheet

for selectors, event listeners and creating HTML elements

1. Set up your DOM Selectors

Classic Selectors

document.getElementById(“login_form”); // Returns one item
document.getElementsByClassName("button-primary");  // Returns an HTML collection of items that satisfy the class name
document.getElementsByTagName("h1"); // Returns an HTML collection of items that satisfy the tag name

• return elements as a live collection of typeHTMLCollection of found elements, references not copies
• HTMLCollections are not as array-like as NodeLists and do not support .forEach()

Query Selectors

document.querySelector(“#search-input”);
document.querySelectorAll(“.todos”);

• querySelector has more options to select elements, you may pass it any CSS3 selector, not just simple ones for id, tag, or class
• performance is O(n) and is worse than the classic selectors, should be used when you cannot use the above selectors
• returns a static array, copy of Node list, not reference

2. Add those Event Listeners

Event listener examples with a callback

document.addEventListener(“click”, callback);
document.addEventListener(“input”, callback);
document.addEventListener(“submit”, callback);
document.addEventListener(“keydown”, callback);
window.addEventListener('DOMContentLoaded', (event) => {
    console.log('DOM fully loaded and parsed');
});

3. Add event handlers (functions)

const handleSubmit = (event) => {
   event.preventDefault();
// rest of logic
}

const handleAddItem = (event) => {  
  const value. = event.target.value;
 
}

4. Creating HTML elements

dynamicallydocument.createElement(“div”)

// Create container div
const newTodoContainer = document.createElement("div");
  newTodoContainer.classList.add("todo");
// Create element
const newTodoItem = document.createElement(“li”);
// Update text
newTodoItem.innerText = todo;
// Add class to it
newTodoItem.classList.add(“todo-item”);
// Place the li item inside the div
newTodoContainer.appendChild(newTodoItem);
// Add Completed Button
const completedButton = document.createElement(“button”);
// Update inner contents, can add images or text
completedButton.innerHTML = “✓”;
// Add class
completedButton.classList.add(“todo-complete-btn”);
// Append to container
newTodoContainer.appendChild(completedButton);
todoList.appendChild(newTodoContainer);

5. Updating and toggling classes

const termsCheckbox = document.getElementById(“terms-conditions”); // Returns one item
termsCheckbox.classList.contains("checked"); // Check if an item has a class
form.classList.add("checked");  // Add a new class
form.classList.remove("checked"); // Remove the class
form.classList.toggle("checked");  // Toggle the class 

6. Updating styles

const form = document.getElementById(“login_form”); // Returns one item
form.style.display = 'none';
form.style.border = 'none';

7. Filtering, Searching & Looping through elements

If it is a node list, you can do the following:

todos.forEach( (todo) => {
 console.log (‘hi’, todo)
}

If it is a HTML Collection, you can do the following:

[...todos].forEach( (todo) => {
 console.log (‘hi’, todo)
}

Searching for elements, and removing them.

// Finding elements
const indexOfTodo = todos.indexOf(todo);
todos.splice(indexOfTodo, 1);

Filtering items, only items that satisfy the condition will be returned

const completedTodos = todos.filter( (todo) => {
 return (todo.status === 'completed'); 
}