Learn

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.

Instructions

Feel free to practice what we’ve learned in this lesson. When you are ready, click “Next” to continue!

Sign up to start coding

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?