#Selecting from Reddit's DOM
We're going to practice some JavaScript based DOM manipulation and traversal in the browser.
Go to reddit and open the JavaScript console (cmd + option + j). Then try to complete the following tasks.
####getElementById
Use getElementById
to do the following:
- find the page header and change it's background color.
- find the element with the id
header-bottom-right
and change it's html to say "Hello NAME" (replace "NAME" with your name and make it bold)
####getElementsByClassName
Use getElementsByClassName
to find every thumbnail and resize them to 20x20 pixels. (hint: you'll need to use a loop)
####getElementsByTagName
Use getElementsByTagName
to add a red background to all links on the page.
####querySelector
Use querySelector
to:
- change the score of the 3rd post on the page.
- change the text in the search box
- use
.value
- use
####querySelectorAll
Use querySelectorAll
to change (re-number) the ranks of the posts so they start from zero instead of 1. (hint: you'll need to use a loop)
###addEventListener
Use addEventListener
to add a 'click' event to the 'body' tag that changes the background color of the body. (hint: utilize the style property')
####Extra
- Try the
getElementById
,getElementByClassName
, andgetElementsByTagName
items with query selector. - Try the
querySelector
items usinggetElement...
. - For additional practice try changing other elements of the page using javascript.