DOM cheat sheet code example

Example 1: javascript cheat sheet

Best Cheat Sheet:
https://websitesetup.org/wp-content/uploads/2020/09/Javascript-Cheat-Sheet.pdf

Example 2: javascript cheat sheet

/* Convenient interactive cheat sheet */ 'https://htmlcheatsheet.com/js/'
/* PDF VERSION */'https://websitesetup.org/wp-content/uploads/2020/09/Javascript-Cheat-Sheet.pdf'

Example 3: javascript dom cheat sheet

// Returns a reference to the element by its ID.
document.getElementById('someid');

// Returns an array-like object of all child elements which have all of the given class names.
document.getElementsByClassName('someclass');

// Returns an HTMLCollection of elements with the given tag name.
document.getElementsByTagName('LI');

// Returns the first element within the document that matches the specified group of selectors.
document.querySelector('.someclass');

// Returns a list of the elements within the document (using depth-first pre-order traversal of the document's nodes)
// that match the specified group of selectors.
document.querySelectorAll('div.note, div.alert');

Example 4: dom javascript cheat sheet

// grab element on page you want to add stuff to
var firstHeading = document.getElementById('firstHeading');

// add both new elements to the page as children to the element we stored in firstHeading.
firstHeading.appendChild(newHeading);
firstHeading.appendChild(newParagraph);

// can also insert before like so

// get parent node of firstHeading
var parent = firstHeading.parentNode;

// insert newHeading before FirstHeading
parent.insertBefore(newHeading, firstHeading);

Example 5: dom javascript cheat sheet

// Get child nodes
var stored = document.getElementById('someid');
var children = stored.childNodes;

// Get parent node
var parental = children.parentNode;

Example 6: dom javascript cheat sheet

<div id='box1'>
  <p>Some example text</p>
</div>
<div id='box2'>
  <p>Some example text</p>
</div>