Methods
The methods in ways we do stuff
| Method | Belongs To | What It Does | Example |
|---|---|---|---|
| 📌 DOM Methods (Manipulating Web Pages) |
|||
.getElementById(id) |
document |
Selects an element by its ID | document.getElementById("box") |
.querySelector(selector) |
document |
Selects the first matching element | document.querySelector(".class") |
.querySelectorAll(selector) |
document |
Selects all matching elements (returns a NodeList) | document.querySelectorAll("div") |
.createElement(tag) |
document |
Creates a new HTML element | document.createElement("p") |
.appendChild(element) |
parentElement |
Adds an element inside another | document.body.appendChild(newDiv) |
.remove() |
element |
Removes an element from the page | document.getElementById("box").remove() |
.addEventListener(event, function) |
element |
Listens for an event (click, hover, etc.) | button.addEventListener("click", myFunc) |
.setAttribute(name, value) |
element |
Sets an attribute on an element | div.setAttribute("id", "box") |
.getAttribute(name) |
element |
Gets the value of an attribute | div.getAttribute("id") |
.classList.add(class) |
element |
Adds a CSS class to an element | div.classList.add("active") |
.classList.remove(class) |
element |
Removes a CSS class | div.classList.remove("active") |
.classList.toggle(class) |
element |
Toggles a CSS class (adds if missing, removes if present) | div.classList.toggle("hidden") |
| 📌 Window Methods (Handling Browser Window & Events) |
|||
.alert(message) |
window |
Shows a popup alert | alert("Hello!") |
.confirm(message) |
window |
Shows a yes/no popup | confirm("Are you sure?") |
.prompt(message) |
window |
Shows a popup with an input field | prompt("Enter your name:") |
.setTimeout(func, ms) |
window |
Runs a function after a delay | setTimeout(() => alert("Hi"), 2000) |
.setInterval(func, ms) |
window |
Runs a function repeatedly at intervals | setInterval(() => console.log("Tick"), 1000) |
.scrollTo(x, y) |
window |
Scrolls the page to a position | window.scrollTo(0, 500) |
| 📌 String Methods (Working with Text) |
|||
.toUpperCase() |
string |
Converts text to uppercase | "hello".toUpperCase() → "HELLO" |
.toLowerCase() |
string |
Converts text to lowercase | "HELLO".toLowerCase() → "hello" |
.trim() |
string |
Removes spaces from start and end | " hello ".trim() → "hello" |
.includes(substring) |
string |
Checks if a string contains a value | "hello".includes("he") → true |
.replace(old, new) |
string |
Replaces part of a string | "hello".replace("h", "j") → "jello" |
.slice(start, end) |
string |
Extracts part of a string | "hello".slice(0, 2) → "he" |
| 📌 Array Methods (Handling Lists of Data) |
|||
.push(item) |
array |
Adds an item to the end | [1,2,3].push(4) → [1,2,3,4] |
.pop() |
array |
Removes the last item | [1,2,3].pop() → [1,2] |
.shift() |
array |
Removes the first item | [1,2,3].shift() → [2,3] |
.unshift(item) |
array |
Adds an item to the start | [1,2,3].unshift(0) → [0,1,2,3] |
.splice(index, count, item?) |
array |
Removes or adds items | [1,2,3].splice(1, 1) → [1,3] |
.slice(start, end) |
array |
Extracts part of an array | [1,2,3].slice(0, 2) → [1,2] |
.indexOf(item) |
array |
Finds the index of an item | ["a", "b", "c"].indexOf("b") → 1 |
.includes(item) |
array |
Checks if an item exists | [1,2,3].includes(2) → true |
.forEach(func) |
array |
Loops through items | [1,2,3].forEach(num => console.log(num)) |
.map(func) |
array |
Creates a new array by modifying each item | [1,2,3].map(x => x * 2) → [2,4,6] |
.filter(func) |
array |
Creates a new array with only matching items | [1,2,3].filter(x => x > 1) → [2,3] |
.reduce(func, start) |
array |
Reduces an array to a single value | [1,2,3].reduce((sum, x) => sum + x, 0) → 6 |
| 📌 Math Methods (Performing Calculations) |
|||
Math.random() |
Math |
Returns a random number (0 to 1) | Math.random() |
Math.floor(num) |
Math |
Rounds down | Math.floor(4.7) → 4 |
Math.ceil(num) |
Math |
Rounds up | Math.ceil(4.1) → 5 |
Math.round(num) |
Math |
Rounds to the nearest whole | Math.round(4.5) → 5 |
Math.max(a, b, ...) |
Math |
Returns the largest number | Math.max(1, 5, 3) → 5 |
Math.min(a, b, ...) |
Math |
Returns the smallest number | Math.min(1, 5, 3) → 1 |