JavaScript ClassList & DOM Manipulation Cheat Sheet
classList Methods
javascript
const element = [Link]('.my-element');
// ADD a class
[Link]('active');
// REMOVE a class
[Link]('active');
// TOGGLE a class (add if missing, remove if present)
[Link]('active');
// CHECK if class exists (returns boolean)
[Link]('active'); // true/false
// REPLACE one class with another
[Link]('old-class', 'new-class');
// ITERATE through all classes
[Link](className => {
[Link](className);
});
Common Patterns
Toggle with Logic
javascript
// If you need conditional logic
if (condition) {
[Link]('active');
} else {
[Link]('active');
}
// Alternative: toggle with condition
[Link]('active', condition); // condition=true adds, false removes
Multiple Classes
javascript
// Add multiple
[Link]('class1', 'class2', 'class3');
// Remove multiple
[Link]('class1', 'class2');
// Toggle multiple (toggles each independently)
[Link]('class1');
[Link]('class2');
DOM List/Collection Methods
NodeList (from querySelectorAll)
javascript
const items = [Link]('.item'); // Returns NodeList
// Convert to Array if needed
const itemsArray = [Link](items);
// OR
const itemsArray = [...items];
// Iterate
[Link](item => {
[Link]('active');
});
// Access specific item
items[0]; // First element
items[[Link] - 1]; // Last element
HTMLCollection (from getElementsByClassName)
javascript
const items = [Link]('item'); // Returns HTMLCollection
// Convert to Array (HTMLCollections are live)
const itemsArray = [Link](items);
// Iterate (HTMLCollection doesn't have forEach)
for (let i = 0; i < [Link]; i++) {
items[i].[Link]('active');
}
Event Listeners with Multiple Elements
javascript
// Add event to multiple elements
[Link]('.btn').forEach(button => {
[Link]('click', function() {
// 'this' refers to the clicked button
[Link]('active');
});
});
// Delegate events (better for dynamic content)
[Link]('click', function(e) {
if ([Link]('btn')) {
[Link]('active');
}
});
Practical Examples
Toggle Navigation (Your Use Case)
javascript
function toggleMenu() {
const menu = [Link]('.menu');
const icon = [Link]('.menu-icon');
// Toggle menu visibility
[Link]('show');
// Toggle icon between ☰ and ✕
[Link]('fa-bars');
[Link]('fa-times');
}
Tabs/Switch Content
javascript
function switchTab(tabId) {
// Remove active from all tabs
[Link]('.tab').forEach(tab => {
[Link]('active');
});
// Add active to clicked tab
[Link](tabId).[Link]('active');
}
Accordion/FAQ
javascript
[Link]('.faq-question').forEach(question => {
[Link]('click', () => {
// Close all others
[Link]('.faq-answer').forEach(answer => {
if (answer !== [Link]) {
[Link]('show');
}
});
// Toggle current
[Link]('show');
});
});
Key Concepts
classList is for CSS classes only
querySelectorAll returns NodeList (has forEach)
getElementsByClassName returns HTMLCollection (no forEach)
Classes control appearance/state; JavaScript controls logic
Use toggle for on/off states, add/remove for complex logic
Quick Reference Card
text
// Single element
[Link]('c') // + class
[Link]('c') // - class
[Link]('c') // +/- class
[Link]('c') // check
// Multiple elements
[Link](el => [Link]('c'))
// Event pattern
[Link]('click', function() {
[Link]('active');
});
Remember: classList is live - changes immediately update the DOM!