DOM Review Lab
Last updated
Was this helpful?
Last updated
Was this helpful?
Title: 'Vanilla' DOM commands Type: Lab Duration: 45 - 60 mins Creator: Karolin Rafalski Original Inspiration by : Thom Page Topics: DOM intro with Vanilla JS Adapted by: Taylor Darneille
This is an exercise to get you familiar with the concept of the DOM and the pattern of how we interact with it.
At the bottom of the DOM Review notes is an appendix of vanilla DOM commands; use that and your notes from lecture to complete the following
Make a new directory called vanilla_dom_practice
that contains three files: index.html
, dom_practice.js
, and readme.md
Make vanilla_dom_practice
a git repo by running git init
in the terminal MAKE SURE YOU'RE IN THE CORRECT FOLDER BEFORE RUNNING GIT INIT. Then to go and create a new remote repository called vanilla_dom_practice
. Follow the instructions to push your recently created local repo to this new remote repo.
after this last part, you'll always be able to just run git push
to push committed changes to github (wihtout the -u flag)
Load your index.html
file for this lab into the browser and make sure that the proper js file is connected.
Include:
html boilerplate
a link to your js file
an h2
tag with a welcome to
and the name of your hometown
an image of your hometown
an h4
tag that says Featuring
an ol
tag (ordered list) that has
2 - 5 li
elements that have text of things in your town
two other html elements of your choice, they can be anywhere in your HTML's body
(maybe a div
or footer
if you are short for ideas)
give one element an id
give at least two elements a class
Note: The focus of this lab is the DOM so don't spend more than 10 minutes on the set up and don't do any extra HTML, skip the CSS for now, CSS is the Hungry for More, if you have time at the end
Check the results of your commands in the Elements tab and in the Console (some divs won't have text, etc. but you can see the element appearing in the DOM in the elements tab.)
Remember: to see it in the console, you will need to either log the JS code or save the code to a variable and log the variable. Save your file and the refresh your browser.
⌘R in your browser, or Command-R will reload your webpage after you have made changes to your html, css, or js files (if your OS has focus on the browser).
Based on your HTML, draw the tree of your elements, starting with the document
as the root and branch off from there
Think about which elements are children, which are siblings, which are 'leaves' or the end of the tree. Can you branch off of text?
Use document.querySelector()
to find your an element
Use document.querySelectorAll()
to find a collection of elements in the DOM.
Refer back to the instructor notes (and the appendix at the bottom) - for more details/syntax checks
🔵 Get the element with the id you assigned and save it to a variable . Console.log that variable.
Make sure you get the element logged in the console:
🔵 Get the h2
element and save it to a variable h2
. Console.log that variable.
🔵 Using JavaScript, change the innerText of your h2
to have 3 exclamation points at the end
🔵 Get all of the elements with the class you assigned and save them to a variable. Console.log that variable.
Make sure you get an array:
And not this (a single element)
Why?
🔵 Change the innerText of one of your list items to 'Jamboree sandwich at the Jambo-ree'
🔵 Create a new img
element using document.createElement()
🔵 Add an attribute for the source url of your new image using .setAttribute()
🔵 Append it to your page, somewhere, using .appendChild()
🔵 Check that your image has appeared
BONUS:
🔵 Select any element using querySelector
and save it to a variable
🔵 and remove it from your page using .remove()
if you would like your element to stay, just comment this line of code out - so you have it as a reference
Slack your homework grader with the link to the github repo you made for this assignment!
Now would be a good time to get a little extra CSS practice
Go ahead and style your page with some CSS
Build an image carousel that scrolls through 2-4 images every 2-3 seconds
You can do this on paper and take a photo and to have a record; you can also use a drawing program if you are more comfortable doing that
🔵 Change the style/color of the text of your ONE of your li
elements to your
Change the style/color of the text of your ALL of your li
elements to another