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.
- Fork and clone
- Create a new branch,
training
, for your work and change into it. - Create a new
code
directory with a sub-directory namedplayground
andcd
into it.
Lab: Change The Logo
Lab: The Dom Detective
- .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