/web-api-dom-selectors

Primary LanguageHTML

/

Link: https://jazzy-cheesecake-ca039f.netlify.app/

Lessons 13 & 14

  • Topics
  • Web APIs

DOM selectors

Challenge

  • Build a sample vanilla js project that utilizes the following web apis below. To implement these you will also need to use DOM selection methods like querySelector and querySelectorAll

Mutation Observer

  • Listen for DOM updates and do something. (You'll probably need to use javascript to trigger that update)

Intersection Observer

  • Listen for scroll position. Animate something when the user crosses a threshold

DOM Parser

  • Fetch html (this can come in handy in Shopify where you need data that does not exist in the "ajax" json response, but does exist on a pdp somewhere)

eg code:

  • CustomEvent (https:/developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent#example)
  • This is a similar concept to the Event Emitter in Node.js - it allows the developer to create reactive, event-driven websites

EyeDropper API

  • This is experimental - just implement for fun!
  • What is the object returned from querySelectorAll called and how does it differ from an Array object in javascript?