Interaction

DOM TREE

Access values

document.body.p.innerHTML = 'hello';


// assign to var
const iceCream = document.getElementById('iceCream');

// remove child 
groceryList.removeChild(iceCream);

// ref to parent
iceCream.parentNode;

Create and edit

// New Elements
const newButton = document.createElement("button");
parent.appendChild(newButton);

// Inner HTML
parent.innerHTML = 'hello';

// CSS
let blueElement = document.getElementById('colorful-element');
blueElement.style.backgroundColor = 'blue';

Select

// Save a reference to the element with id 'demo':
const demoElement = document.getElementById('demo');

// Select the first div.class-name
const firstDiv = document.querySelector('div.class-name');
// Selects all the div.class-name
const allDiv = document.querySelector('div.class-name');
 
// Select the first .button element inside .main-navigation
const navMenu = document.getElementById('main-navigation');
const firstButtonChild = navMenu.querySelector('.button');

Events

let element = document.getElementById('addItem');
element.onclick = function() { 
  let newElement = document.createElement('li');
  document.getElementById('list').appendChild(newElement);
};