Class 08 ‐ JS Objects and the DOM - lenincompres/ima-front-end-web GitHub Wiki

Part 1

Part 2

  • Object Oriented programming - OOP
  • HTML - JS scripts and the DOM
    • Nodes: Parent, Children, Siblings
    • NodeLists - document.body.childNodes
    • Selecting classes, id, elements
    • Seeing innerHtml, classList on a node
    • Modifying the DOM
    • Adjusting innerHtml, textContent on a node
    • Add/Remove/Toggle classList
    • createElement
    • appendChild, replaceChild, insertBefore, insertAdjacent
    • Listening to events

HOMEWORK

In The Javascript Way

  • Read Chapter 9 - 10. Complete the exercises only or Chapter 9. Submit a code pen link.
  • Review Chapters 13 - 16 (no need to turn in the assignments but you should attempt them anyway)
  • Coding exercise:
    • Begin by creating an HTML document that has at least 10 of the same HTML elements.
    • Wrap some of these inside of
      tags. Assign an ID to at least two of your
      tags.
    • Build three buttons that will run a function on click.
    • Add three empty divs to the bottom of your page with unique IDs.
    • Now, create at least three functions that will run on click:
      • How many of the same HTML elements are on the page. (For example, if you included 10

        tags, it should return a statement that says something like, "There are 10 paragraph tags on this page.")

      • How many elements are inside of your first ID
      • How many elements are inside of your second ID
      • Each function should update one of the three empty divs with this information
    • Submit a link to your GITHUB Rep by the start of our next class Thursday.
⚠️ **GitHub.com Fallback** ⚠️