SheTech
  • SheTech JS bootcamp
  • Level 1 - awesome tasks
    • Introduction to Awesome Tasks
    • Step 1: HTML
    • Step 2: playing with the DOM
    • Step 3: add a new task
    • Step 4: dynamic list of tasks
    • Step 5: adding new items
    • Step 6: removing items
    • Step 7: add some style
    • Step 8: marking items as done
    • Step 9: saving items in the localstorage
    • Step 10: adding filters and bulk actions
    • Step 11: add counters
    • From Awesome Task to the next big thing!
  • Level 2 - timeline
    • Live Timeline
    • Step 1: basic HTML page
    • Step 2: add util library
    • Step 3: show all posts
    • Step 4: add form
    • Step 5: collect form data
    • Step 6: create a new post
    • Step 7: validating posts
    • Step 8: refactoring
    • Step 9: refresh button
    • Step 10: auto refresh
  • Code Editors
  • Useful resources
  • API Reference
  • Glossary
Powered by GitBook
On this page
  • DOM Recap
  • Exercises

Was this helpful?

  1. Level 1 - awesome tasks

Step 2: playing with the DOM

PreviousStep 1: HTMLNextStep 3: add a new task

Last updated 4 years ago

Was this helpful?

Before we move on making our app dynamic, we must to be sure to understand what the DOM actually is and how it works.

DOM Recap

  • The Document Object Model (DOM) is a programming interface for HTML, XML and SVG documents. It provides a structured representation of the document as a tree.

  • document.body returns the body of the page

  • document.querySelector returns the first Element node within the document, in document order, that matches the specified selectors

  • element.innerHTML represents the "rendered" text content of a node and its descendants.

More on

Exercises

Try these exercises in the browser console:

  • Print the body of the page

  • Find the element with id task-list

  • Change the text of one element

MDN