kedeger/selecting-reddit

[javascript, dom]

#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

####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, and getElementsByTagName items with query selector.
• Try the querySelector items using getElement....
• For additional practice try changing other elements of the page using javascript.