Scribd
Upload
76 views

Js Dom Cheatsheet

The document discusses the Document Object Model (DOM) in JavaScript. It provides methods for querying, modifying, creating, and removing DOM elements. It describes different types of DOM nodes including element nodes, text nodes, child nodes, parent nodes, and more. It also covers adding and removing event listeners to DOM elements.

Uploaded by

Christian Silva
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
76 views

Js Dom Cheatsheet

The document discusses the Document Object Model (DOM) in JavaScript. It provides methods for querying, modifying, creating, and removing DOM elements. It describes different types of DOM nodes including element nodes, text nodes, child nodes, parent nodes, and more. It also covers adding and removing event listeners to DOM elements.

Uploaded by

Christian Silva
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 1

< > iLoveCoding

♥
JavaScript Cheatsheet
Page 9

Learn JavaScript Correctly (Video course) https://ilovecoding.org/courses/js2

14 DOM - Document Object Model


What is a "Node"?
Query/Get Elements Modify Element (in the context of DOM)
// Preferred way: node.style.color = 'red'
document.querySelector('css-selectors') node.style.padding = '10px', Node: Every item in the DOM
document.querySelectorAll('css-selectors', ...) node.style.fontSize = '200%' tree is called a node. There
are two types of node - A text
// Old ways, and still work: node.setAttribute('attr-name', 'attr-value') node, and an element node:
document.getElementsByTagName('element-name') node.removeAttribute('attr-name')
document.getElementsByClassName('class-name') Text Node: Node that has text.
document.getElementById('id') Get and Modify Element Class
node.classList Element Node: Node that has
Create / clone Element node.classList.add('class-name', ...) an element.
document.createElement('div') node.classList.remove('class-name', ...)
document.createTextNode('some text here') node.classList.toggle('class-name')
node.cloneNode() node.classList.contains('class-name') Child Node: A node which is a
node.textContent = 'some text here' node.classList.replace('old', 'new') child of another node.

Add node to document Remove Node Parent Node: A node which


parentNode.appendChild(nodeToAdd) parentNode.removeChild(nodeToRemove) has one or more child.
parentNode.insertBefore(nodeToAdd, childNode) // Hack to remove self
nodeToRemove.parentNode.removeChild(nodeToRemove) Descendent Node: A node
Get Element Details which is nested deep in the
node.nextSibling tree.
Events
node.firstChild
node.addEventListener('event-name', callback-function)
node.lastChild Sibling Node: A node that
node.removeEventListener('event-name', callback-function)
node.parentNode share the same parent node.
node.childNodes
List of Events: https://developer.mozilla.org/en-US/docs/Web/Events
node.children
or google "Mozilla event reference"
iLoveCoding
"Don't just learn JavaScript - Become a Full-Stack JavaScript Developer" https://iLoveCoding.org

You might also like