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
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.