Today we're going to learn all about the browsers native document object model.

By the end of this, developers should be able to:

• Know how to use the DOM.
• Reference DOM documentation when learning a new API.
• After selecting a DOM node, reach another node using traversal.
• Get data from the DOM.
• Put data into the DOM.
• Create new elements and insert them into the DOM.
• Use event listeners and handlers for user interaction.
• Animate elements using JavaScript.

1. Fork and clone
2. Create a new branch, training, for your work and change into it.
3. Create a new code directory with a sub-directory named playground and cd into it.

• The Document Object Model

• DOM Model - 0 - 1
• DOM Model - 0 - 2
• DOM Model - 1
• DOM Model - 2
• DOM Model - 3

• .innerText()
• .innerHTML()
• .append()
• .appendChild()
• .prepend()
• .after()
• .before()
• .insertAdjacentHTML()
• .replaceWith()
• .remove()

Always make sure to check the browser support status for native API's.

• The DOM | Check out this Video
  • The point is to get you to think about the DOM as a tree! The DOM is not source code and it's also not a rendered page.
• Walking the DOM
• 6 jQuery-inspired Native DOM Manipulation Methods You Should Know