Cacher is the code snippet organizer for pro developers

JAVASCRIPT AND THE DOM
Review
In this lesson, you manipulated a webpage structure by leveraging the Document Object Model interface in JavaScript.

Let’s review what we learned:

The document keyword grants access to the root of the DOM in JavaScript
The DOM Interface allows you to select a specific element with CSS selectors by using the .querySelector() method
You can also access an element directly by its ID with .getElementById()
The .innerHTML and .style properties allow you to modify an element by changing its contents or style respectively
You can create, append, and remove elements by using the .createElement(),.appendChild() and .removeChild() methods respectively
The .onclick property can add interactivity to a DOM element based on a click event

document.querySelector('h1').innerHTML = 'Most popular TV show searches in 2016';
document.getElementById('fourth').innerHTML = 'Fourth element';

document.querySelector('body').style.backgroundColor = '#201F2E';

let newElement = document.createElement('li');
newElement.id = 'oaxaca';
newElement.innerHTML = 'Oaxaca, Mexico';
document.getElementById('more-destinations').appendChild(newElement);

let newElement = document.getElementById('oaxaca');
document.getElementById('more-destinations').removeChild(newElement);

let element = document.querySelector("button");

function turnButtonRed (){
element.style.backgroundColor = 'red';
element.style.color = 'white';
  element.innerHTML = 'Red Button';
  
}

element.onclick = turnButtonRed;

let first = document.body.firstChild;
first.innerHTML = 'i am the child';
first.parentNode.innerHTML = 'I am the parent and my inner HTML has been replaced!';