Scribd
Upload
235 views4 pages

js_dom_cheatsheet (1)

This document is a comprehensive JavaScript DOM cheatsheet that outlines various methods for accessing, manipulating, creating, appending, and removing DOM elements. It also covers event handling, traversing DOM elements, managing classes, handling form elements, and interacting with the window and document properties. Key functions and their usage are provided for each category, making it a useful reference for developers working with the DOM in JavaScript.

Uploaded by

tridib.thk.bd
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
235 views4 pages

js_dom_cheatsheet (1)

This document is a comprehensive JavaScript DOM cheatsheet that outlines various methods for accessing, manipulating, creating, appending, and removing DOM elements. It also covers event handling, traversing DOM elements, managing classes, handling form elements, and interacting with the window and document properties. Key functions and their usage are provided for each category, making it a useful reference for developers working with the DOM in JavaScript.

Uploaded by

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

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); });

You might also like