In this lesson, you manipulated a webpage structure by leveraging the Document Object Model (DOM) 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 access an element directly by its ID with the .getElementById() method which returns a single element.
• You can access an array of elements with the .getElementsByClassName() and .getElementsByTagName() methods, then call a single element by referencing its placement in the array.
• 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.
• The .children property returns a list of an element’s children and the .parentNode property returns the element’s closest connected node in the direction towards the root.