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';