JavaScript DOM Cheatsheet
1. Accessing DOM Elements
1. document.getElementById(id) - Selects an element by its ID.
var element = document.getElementById('myId');
2. document.getElementsByClassName(className) - Returns a collection
of elements with a specific class.
var elements = document.getElementsByClassName(' myClass');
3. document.getElementsByTagName(tagName) - Returns a collection of
elements with a specific tag name.
var elements = document.getElementsByTagName('div');
4. document.querySelector(selector) - Selects the first element that
matches the CSS selector.
var element = document.querySelector('.myClass');
5. document.querySelectorAll(selector) - Selects all elements that match
the CSS selector.
var elements = document.querySelectorAll('div.myClass');
2. Manipulating DOM Elements
1. element.innerHTML - Gets or sets the HTML content inside an element.
element.innerHTML = '<p>New content</p>';
2. element.textContent - Gets or sets the text content inside an element
(no HTML parsing).
element.textContent = 'Plain text content';
3. element.style.property - Modifies the inline CSS of an element.
element.style.backgroundColor = 'blue';
4. element.setAttribute(attribute, value) - Adds or changes an attribute on
an element.
element.setAttribute('src', 'image.jpg');
5. element.getAttribute(attribute) - Gets the value of an attribute on an
element.
var value = element.getAttribute('href');
6. element.removeAttribute(attribute) - Removes an attribute from an
element.
element.removeAttribute('disabled');
3. Creating and Appending Elements
1. document.createElement(tagName) - Creates a new element.
var newElement = document.createElement('div');
2. parentElement.appendChild(newElement) - Appends a child element
to the parent.
parentElement.appendChild(newElement);
3. parentElement.insertBefore(newElement, referenceElement) - Inserts
a new element before the reference element.
parentElement.insertBefore(newElement,
referenceElement);
4. Removing Elements
1. parentElement.removeChild(childElement) - Removes a child element
from the parent.
parentElement.removeChild(childElement);
2. element.remove() - Removes the element itself from the DOM.
element.remove();
5. Event Handling
1. element.addEventListener(event, function) - Adds an event listener to
an element.
element.addEventListener('click', function() {
alert('Element clicked!');
});
2. element.removeEventListener(event, function) - Removes an event
listener from an element.
element.removeEventListener('click', handlerFunction);
6. Traversing DOM Elements
1. element.parentNode - Selects the parent node of the element.
var parent = element.parentNode;
2. element.children - Returns a collection of the child elements of an
element.
var children = element.children;
3. element.firstChild / element.lastChild - Selects the first or last child of
an element.
var firstChild = element.firstChild;
var lastChild = element.lastChild;
4. element.previousSibling / element.nextSibling - Selects the previous or
next sibling of an element.
var prev = element.previousSibling;
var next = element.nextSibling;
7. Classes
1. element.classList.add(className) - Adds a class to the element.
element.classList.add('newClass');
2. element.classList.remove(className) - Removes a class from the
element.
element.classList.remove('oldClass');
3. element.classList.toggle(className) - Toggles a class on the element.
element.classList.toggle('active');
4. element.classList.contains(className) - Checks if the element contains
a class.
var hasClass = element.classList.contains('myClass');
8. Form Elements
1. inputElement.value - Gets or sets the value of an input element.
var value = inputElement.value;
inputElement.value = 'New value';
2. inputElement.checked - For checkboxes or radio buttons, checks if the
input is checked.
var isChecked = inputElement.checked;
3. selectElement.options - Returns the collection of options in a select
dropdown.
var options = selectElement.options;
9. Events
1. event.target - Refers to the element that triggered the event.
element.addEventListener('click', function(event) {
console.log(event.target);
});
2. event.preventDefault() - Prevents the default behavior of the event.
event.preventDefault();
3. event.stopPropagation() - Stops the event from bubbling up to parent
elements.
event.stopPropagation();
10. Window and Document
1. window.innerHeight / window.innerWidth - Gets the inner height and
width of the window.
var height = window.innerHeight;
var width = window.innerWidth;
2. window.scrollTo(x, y) - Scrolls the window to the specified position.
window.scrollTo(0, 500);
document.title - Gets or sets the document's title.
document.title = 'New Title';
3. document.cookie - Gets or sets the document's cookies.
document.cookie = 'username=John Doe';
Example: Combining DOM Manipulation and Events
document.querySelector('#myButton').addEventListener('click',
function() {
var div = document.createElement('div');
div.textContent = 'New Element';
div.classList.add('newDiv');
document.body.appendChild(div); });
