Intro to DOM Manipulation Solutions

Warm Up

As stated in the lesson, scholars will need to view their console.log outputs in the Chrome Dev Tools for this lesson. There is a lot of content out there to learn how to do this, so it’s a good opportunity to let them self-research.

Before wrapping up the Warm Up, you probably want to either lead a short whole-group session reviewing, or have verified that each scholar can open the Dev Tools and find a console.log from CodePen in the console section.

Turn & Talk

Places that DOM Manipulation is used on most sites:

  • Clicking on buttons/icons
  • Clicking on “search” icon
  • Typing in characters into search bar, typing “enter” when in search bar
  • Hover over one of the menu items on the top nav bar to see a larger menu of options under that specific category.

Try It: Accessing Elements

See the Pen Intro DOM: Try It 1 by Turing KWK (@turing-kwk) on CodePen.

Medium Challenge: Create a duplicate of one of your elements in HTML and run the code again. Was anything different printed in the console? Use your google skills to research the difference between .querySelector and .querySelectorAll.

  • Nothing different happened when I added a second submit button.
  • After researching .querySelector, I learned that JS will find the FIRST element that matches the query, then stop. This makes sense when I think about what happened when I had two submit buttons - only the first one was stored to the variable.
  • .querySelectorAll, on the other hand, returns a list of ALL matches!
  • Source: https://teamtreehouse.com/community/i-would-like-to-know-what-exactly-is-the-difference-between-queryselector-and-queryselectorall-against

Try It: Access Elements with jQuery

In the HTML file, create an h1 and two p elements. In the JavaScript file, use the jQuery $ syntax to access all three elements and store them in variables. Then, console.log() all three variables to make sure you stored the elements correctly.

See the Pen Intro to DOM: jQuery 1 by Turing KWK (@turing-kwk) on CodePen.

Try It: Change Text

Continue working in the CodePen from the last Try It. By only adding code to the JavaScript file, change the text inside of all three elements.

See the Pen Intro to DOM: Change Text by Turing KWK (@turing-kwk) on CodePen.

Medium Challenge: If you changed the text of the h1 on one line of code, then on the line below changed it to something else, which one would show in the browser? Why?

  • I did that on line 3 of the CodePen above. If you un-comment it out, you’ll see that the text in the browser will be the text from line 3.
  • This tells me that the line lowest in the JavaScript file will be what is, in the end, listened to.

Turn & Talk

Line 3 is giving an instruction to the computer to listen for an event on the button, specifically a click event. When the button is clicked on, the doSomething function will be called.

Medium Challenge: The function doSomething is never called with the syntax we’ve learned: doSomething. Why not? What happens if we add () after doSomething on line 3?

  • The doSomething doesn’t have () after it on line 3 because we would call it immediately, instead of waiting until the button is clicked.

Try It: Event Listeners

There will be many variations, but the general idea is communicated in this CodePen:

See the Pen Try It: Event Listeners Solution by Turing KWK (@turing-kwk) on CodePen.

When you’re done, answer these questions with your partner:

  • What line of code is your event listener on?
    • In the CodePen linked above, the event listener is on line 4.
  • What type of event is your listener on the lookout for?
    • My listener is looking out for a click event. This is because I typed “click” in as the first argument.
  • What is the name of your event handler?
    • The name of my event handler function, declared on line 6, is doSomething.

Turn & Talk: Access CSS

Fork the CodePen above, then answer these questions with your partner:

  • Why does the button go back and forth between pink and purple?
    • The button goes back and forth because when it is clicked, the event listener fires off the changeColors function. In that function, we toggle the pink class on or off. If the pink class gets toggled off, purple takes over because purple the color of the button (CSS line 6).
  • Try changing .toggleClass to .addClass - what happens?
    • If we change it to .addClass - it will turn from purple to pink the first time it is clicked, then remain pink forever.
  • What happens when you change .toggleClass to .removeClass? Why?
    • No change will ever really occur; the pink class wasn’t initially on the element, so removing it creates no change.

Practice

Dark Mode/Light Mode:

See the Pen Intro to DOM: Dark Mode by Turing KWK (@turing-kwk) on CodePen.

may use later⬇