Scribd
Upload
17 views3 pages

Expanded Dom Cheat Sheet

This document is a cheat sheet for DOM manipulation in JavaScript, covering essential methods for selecting elements, changing text and styles, managing classes, adding event listeners, creating and removing elements, traversing the DOM, handling form inputs, working with attributes, using local storage, and making basic API fetch requests. Each section includes examples to illustrate the usage of the methods. Additionally, it provides a tip for script placement in HTML for optimal performance.

Uploaded by

John Ibe
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
17 views3 pages

Expanded Dom Cheat Sheet

This document is a cheat sheet for DOM manipulation in JavaScript, covering essential methods for selecting elements, changing text and styles, managing classes, adding event listeners, creating and removing elements, traversing the DOM, handling form inputs, working with attributes, using local storage, and making basic API fetch requests. Each section includes examples to illustrate the usage of the methods. Additionally, it provides a tip for script placement in HTML for optimal performance.

Uploaded by

John Ibe
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

DOM Manipulation Cheat Sheet (JavaScript) — With Examples

----------------------------------------
1. SELECT ELEMENTS

- By ID:
const title = document.getElementById('title');

- By class:
const items = document.getElementsByClassName('item');

- By tag:
const paragraphs = document.getElementsByTagName('p');

- Using querySelector (first match):


const button = document.querySelector('#submit-btn');

- Using querySelectorAll (all matches):


const listItems = document.querySelectorAll('.list-item');

----------------------------------------
2. CHANGE TEXT OR HTML

element.textContent = 'Hello world!';


element.innerHTML = '<strong>Bold text</strong>';

Example:
document.getElementById('title').textContent = 'Welcome!';

----------------------------------------
3. CHANGE STYLES

element.style.color = 'blue';
element.style.fontSize = '20px';

Example:
button.style.backgroundColor = 'green';

----------------------------------------
4. MANAGE CLASSES

element.classList.add('active');
element.classList.remove('hidden');
element.classList.toggle('dark-mode');

Example:
title.classList.toggle('highlight');

----------------------------------------
5. ADD EVENT LISTENERS

element.addEventListener('click', function() {
alert('Button clicked!');
});

Example:
button.addEventListener('click', () => {
console.log('You clicked the button!');
});

----------------------------------------
6. CREATE AND ADD ELEMENTS

const newItem = document.createElement('li');


newItem.textContent = 'New list item';
document.querySelector('ul').appendChild(newItem);

----------------------------------------
7. REMOVE ELEMENTS

const item = document.querySelector('.item');


item.remove();

----------------------------------------
8. TRAVERSE THE DOM

element.parentElement;
element.children;
element.nextElementSibling;
element.previousElementSibling;

Example:
const parent = item.parentElement;
const firstChild = parent.children[0];

----------------------------------------
9. FORM INPUTS

const input = document.querySelector('#name');


input.value = 'John Doe';

----------------------------------------
10. ATTRIBUTES

element.setAttribute('src', 'image.jpg');
element.getAttribute('href');
element.removeAttribute('disabled');

Example:
document.querySelector('img').setAttribute('alt', 'Picture of a cat');

----------------------------------------
11. WORKING WITH LOCAL STORAGE

localStorage.setItem('key', 'value');
const value = localStorage.getItem('key');
localStorage.removeItem('key');

Example:
localStorage.setItem('username', 'john123');

----------------------------------------
12. FETCH API (Basic)

fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data));
----------------------------------------
Tip:
Place your <script> tag at the end of <body> or wrap JS code like this:

window.onload = function() {
// your code here
};

You might also like