JavaScript DOM

Created with Sketch.

JavaScript DOM

This section covers the JavaScript Document Object Model (DOM) and shows you how to manipulate DOM elements effectively.

Section 2. Selecting elements

Section 3. Traversing elements

Section 4. Manipulating elements

  • createElement() – create a new element.
  • appendChild()  – append a node to a list of child nodes of a specified parent node.
  • textContent – get and set the text content of a node.
  • innerHTML – get and set the HTML content of an element.
  • innerHTML vs. createElement – explain the differences beetween innerHTML and createElement when it comes to creating new elements.
  • DocumentFragment – learn how to compose DOM nodes and insert them into the active DOM tree.
  • insertBefore() – insert a new node before an existing node as a child node of a specified parent node.
  • insertAfter() helper function – insert a new node after an existing node as a child node of a specified parent node.
  • append() – insert a node after the last child node of a parent node.
  • prepend() – insert a node before the first child node of a parent node.
  • insertAdjacentHTML() – parse a text as HTML and insert the resulting nodes into the document at a specified position.
  • replaceChild() – replace a child element by a new element.
  • cloneNode() – clone an element and all of its descendants.
  • removeChild() – remove child elements of a node.

Section 5. Working with Attributes

Section 6. Manipulating Element’s Styles

Section 7. Working with Events

  • JavaScript events – introduce you to the JavaScript events, the event models, and how to handle events.
  • Handling events – show you three ways to handle events in JavaScript.
  • Page Load Events – learn about the page load and unload events.
  • load event – walk you through the steps of handling the load event originating from the document, image, and script elements.
  • DOMContentLoaded – learn how to use the DOMContentLoaded event correctly.
  • beforeunload event – guide you on how to show a confirmation dialog before users leave the page.
  • unload event – show you how to handle the unload event that fires when the page is completely unloaded.
  • Mouse events – how to handle mouse events.
  • Keyboard events – how to deal with keyboard events.
  • Scroll events – how to handle scroll events effectively.
  • scrollIntoView – learn how to scroll an element into view.
  • Focus Events – cover the focus events.
  • haschange event – learn how to handle the event when URL hash changes.
  • Event Delegation – is a technique of levering event bubbling to handle events at a higher level in the DOM than the element on which the event originated.
  • dispatchEvent – learn how to generate an event from code and trigger it.
  • Custom Events – define a custom JavaScript event and attach it to an element.
  • MutationObserver – monitor the DOM changes and invoke a callback when the changes occur.

Section 8. Scripting Web Forms

JavaScript DOM Projects

Toggle Password Visibility

Learn how to toggle the visibility of the password.

Word Counter

A step-by-step guide you on how to develop a Word Counter app.

Wikipedia Search

Build a Wikipedia Search application from scratch.

Form Validation

Show you how to implement Form Validation using JavaScript

Countdown Timer

Make a reusable countdown timer and use it to build the New Year countdown.

Leave a Reply

Your email address will not be published. Required fields are marked *