9. JavaScript DOM

JavaScript DOM Crash Course - Part 1 by Traversy Media

JavaScript DOM Crash Course - Part 2 by Traversy Media

JavaScript DOM Crash Course - Part 3 by Traversy Media

JavaScript DOM Crash Course - Part 4 [Final Project] by Traversy Media

DOM - Document Object Model

The Document Object Model (DOM) is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects; that way, programming languages can interact with the page.

Course Content

• Part 1

  02:45 - DOM Introduction
  04:52 - HTML Structure
  07:07 - Examine the Document Object
  15:43 - Selectors
  15:54 - getElementById()
  22:29 - getElementsByClassName()
  27:11 - getElementsByTagName()
  29:14 - querySelector()
  34:48 - querySelectorAll()

• Part 2

  00:23 - Traversing the DOM Introduction
  01:18 - Parents
  01:18 - .parentNode
  04:03 - .parentElement
  04:48 - Children, .childNodes
  06:36 - .children
  08:03 - .firstChild
  08:58 - .firstElementChild
  09:38 - .lastChild & .lastElementChild
  10:37 - Siblings
  10:37 - .nextSibling
  11:17 - .nextElementSibling
  12:04 - .previousSibling
  12:31 - .previousElementSibling
  14:12 - Create Elements
  14:30 - .createElement()
  16:50 - .createTextNode()
  17:27 - .appendChild()
  17:59 - Insert Created Elements Into the DOM
  18:12 - .insertBefore()

• Part 3

  00:11 - Introduction
  00:45 - Event Listener Introduction
  02:46 - .addEventListener() with Click Event
  04:59 - Event Parameter
  05:47 - e.target
  08:43 - e.type
  09:10 - e.clientX
  09:40 - e.clientY
  10:01 - e.offsetX
  10:29 - e.offsetY
  10:54 - e.altKey, ctrlKey & shiftKey
  12:26 - Mouse Events
  14:18 - dblclick
  14:38 - mousedown
  15:00 - mouseup
  15:17 - mouseenter
  17:03 - mouseleave
  17:19 - mouseover & mouseout
  19:15 - mousemove
  23:05 - Keyboard & Input Events
  24:17 - keydown
  26:11 - keyup
  26:34 - keypress
  26:50 - focus & blur
  27:34 - cut
  28:41 - paste
  28:50 - input
  29:23 - change
  31:50 - submit

• Part 4 - Final Project

  2:23 - add event listener
  5:52 - add text node
  8:29 - add the classes
  9:31 - create a text node
  9:44 - append the button to the li
  10:30 - add an event listener
  12:50 - confirm box
  13:33 - remove the child of the item list
  16:59 - get all the allies within the item list
  21:26 - add local storage

Resources

▶️ Traversy Media
🔗 JavaScript Tutorial by W3Schools