Modifying the DOM

// Find a style value of a element in dom
var header = document.querySelector('.header');
window.getComputedStyle(header).getPropertyValue('margin-left')

// Append element1 as the last child of element2
element1.appendChild(element2)

// Insert element2 as child of element 1, right before element3
element1.insertBefore(element2, element3)

// Gets the input submit
const myChildElemet = myElement.querySelector('input[type="submit"]')

// Create a clone
const myElementClone = myElement.cloneNode()
myParentElement.appendChild(myElementClone)

// Create new elements
const myNewElement = document.createElement('div')
const myNewTextNode = document.createTextNode('some text')

// Remove a child (workaround)
myElement.parentNode.removeChild(myElement)

// Replace the inner HTML
myElement.innerHTML = `
  <div>
    <h2>New content</h2>
    <p>beep boop beep boop</p>
  </div>
`

//Adds to the innerhtml
header.innerHTML += `
  <a href="foo.html">continue reading...</a>
  <hr/>
`

// Remove all child nodes
myElement.innerHTML = null

// Best way of listening for event
myElement.addEventListener('click', function (event) {
  console.log(event.type + ' got fired')
})

// Prevent default
myForm.addEventListener('submit', function (event) {
  const name = this.querySelector('#name')

  if (name.value === 'Donald Duck') {
    alert('You gotta be kidding!')
    event.preventDefault()
  }
})

//Classlist
node.classList.add(class) //adds a class
node.classList.remove(class)
node.classList.toggle(class)
node.classList.length //how many
node.classList.contains //class name


//insert html anywhere in the dom
myNode.insertAdjacentHTML('afterend','<p>This is added html to the end of whatever myNode is</p>') //Could be 'beforebegin' 'afterbegin' (after the first element), 'beforeend' (before the last element)

variable.setAttribute('id', 'ticket');

variable.placeholder = 'Symbol';

variable.style.width = '90%';

variable.innerHTML = 'USD';

variable.className = 'flex-container';