Here's a cheat sheet summarizing common DOM (Document Object Model) manipulation methods and properties in JavaScript
|
document.getElementById():
|
||
|
Retrieves an element by its ID.
|
||
|
Syntax: document.getElementById('elementId')
|
||
|
document.querySelector():
|
||
|
Retrieves the first element that matches a specified CSS selector.
|
||
|
Syntax: document.querySelector('selector')
|
|
element.parentElement:
|
|
|
Accesses the parent element of a specified element.
|
|
|
Example: element.parentElement
|
|
|
element.children:
|
|
|
Accesses a collection of child elements of a specified element.
|
|
|
Example: element.children
|
|
|
element.nextElementSibling:
|
|
|
Accesses the next sibling element of a specified element.
|
|
|
Example: element.nextElementSibling
|
|
|
element.previousElementSibling:
|
|
|
Accesses the previous sibling element of a specified element.
|
|
|
Example: element.previousElementSibling
|
|
document.getElementsByClassName():
|
|
|
Retrieves elements by their class name.
|
|
|
Syntax: document.getElementsByClassName('className')
|
|
|
document.getElementsByTagName():
|
|
|
Retrieves elements by their tag name.
|
|
|
Syntax: document.getElementsByTagName('tagName')
|
|
|
document.querySelectorAll():
|
|
|
Retrieves all elements that match a specified CSS selector.
|
|
|
Syntax: document.querySelectorAll('selector')
|
|
document.createElement():
|
|
|
Creates a new element node.
|
|
|
Syntax: document.createElement('tagName')
|
|
|
parentElement.appendChild():
|
|
|
Appends a child node to the end of the list of children of a specified parent node.
|
|
|
Syntax: parentElement.appendChild(childElement)
|
|
|
element.remove():
|
|
|
Removes the specified element from the DOM.
|
|
|
Syntax: element.remove()
|
|
|
parentElement.removeChild():
|
|
|
Removes a specified child node from the DOM.
|
|
|
Syntax: parentElement.removeChild(childElement)
|
|
element.textContent:
|
|
|
Represents the text content of an element.
|
|
|
Example: element.textContent = 'New text';
|
|
|
element.innerHTML:
|
|
|
Represents the HTML content of an element.
|
|
|
Example: element.innerHTML = '<p>New content</p>';
|
|
|
element.setAttribute():
|
|
|
Sets the value of an attribute on the specified element.
|
|
|
Syntax: element.setAttribute('attribute', 'value')
|
|
|
element.style.property:
|
|
|
Changes the CSS style properties of an element.
|
|
|
Example: element.style.color = 'red';
|
|
element.addEventListener():
|
|
|
Attaches an event handler to the specified element.
|
|
|
Syntax: element.addEventListener('event', function(event) { / handler code / })
|
No comments yet.
Cheatography n. The art of mapping complex subjects into clear, instantly navigable reference guides.
