7/17/2017 - 9:16 PM

JavaScript Cheat Sheet

JavaScript Cheat Sheet

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

//Get parent node
var parental = children.parentNode;
//create new elments
var newHeading = document.createElement('h1');
var newParagraph = document.createElement('p');

//create text nodes for new elements
var h1Text= document.createTextNode("This is the fucking header text!");
var paraText= document.createTextNode("This is the fucking Paragraph text!");

//attach new text nodes to new elements

//elements are now created and ready to be added to the DOM.
//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.

//can also insert before like so

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

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

//Suppose you have the following HTML
<div id="box1">
    <p>Some example text</p>
<div id="box2">
    <p>Some example text</p>

//you can insert another snippet of HTML between #box1 and #box2 
var box2 = document.getElementById("box2");
box2.insertAdjacentHTML('beforebegin', '<div><p>This gets inserted.</p></div>');

//beforebegin - The HTML would be placed immediately before the element, as a sibling.
//afterbegin - The HTML would be placed inside the element, before its first child.
//beforeend - The HTML would be placed inside the element, after its last child.
//afterend - The HTML would be placed immediately after the element, as a sibling.
//Returns a reference to the element by its ID.

//Returns an array-like object of all child elements which have all of the given class names.

//Returns an HTMLCollection of elements with the given tag name. 

//Returns the first element within the document that matches the specified group of selectors.

//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.