flexpath-js-and-the-dom-exercises

Exercise overview

The intention of this exercise is to give you more experience manipulating the Document Object Model (DOM) of a webpage using JavaScript.

Getting Started

1. Using Visual Studio Code, open the folder flexpath-js-and-the-dom-exercises wherever you saved it on your device.

2. Then open the flexpath-js-and-the-dom-exercises/exercise folder. Inside is a file named index.html. Open this file in your web browser using the methods shown in flexpath-html-and-css-in-depth-exercises.

3. You will write your JavaScript code in exercise.js. Any time you make a change, save the file and then refresh the webpage displaying your .html web page in the browser.

   We have included a video js-and-the-dom.mp4 showing how to do this.

   Exercise instructions are provided to you as code comments in the exercises.js file.

VIDEO DISCLAIMER - You will need to clone the repo to your local device before you can watch the .mp4 file since GitHub does not support watching it from here.

Exercise solutions are in the /solution folder

 

Summary of JavaScript Concepts Covered in These Exercises

1. Document Object Model (DOM) Manipulation:

   • Accessing and modifying elements using methods like getElementById, querySelector, and querySelectorAll.
   • Navigating the DOM tree using properties like parentNode, childNodes, firstChild, and lastChild.
   • Updating the content and attributes of elements using innerHTML, textContent, and setAttribute.

2. Event Handling:

   • Adding event listeners with addEventListener and removing them with removeEventListener.
   • Handling various events such as clicks, mouse movements, and key presses.
   • Understanding event propagation, event bubbling, and stopping event propagation.

3. Debugging and Performance:

   • Using console.log for debugging.
   • Understanding the performance impact of certain DOM manipulations and optimizing code.

4. Advanced DOM Manipulations:

   • Creating and appending new elements using createElement and appendChild.
   • Removing elements from the DOM with remove.
   • Using class manipulation methods like classList.add, classList.remove, and classList.toggle.

5. Preventing Default Behaviors:

   • Preventing default actions of HTML elements using preventDefault.

6. Drag and Drop Functionality:

   • Implementing basic drag and drop features with event listeners for dragstart, dragover, and drop.
   • Using dataTransfer to pass data between drag and drop events.

---