JavaScript: Enhancing the DOM

Go to class
Write Review

Free Online Course: JavaScript: Enhancing the DOM provided by LinkedIn Learning is a comprehensive online course, which lasts for 2-3 hours worth of material. The course is taught in English and is free of charge. Upon completion of the course, you can receive an e-certificate from LinkedIn Learning. JavaScript: Enhancing the DOM is taught by Ray Villalobos.

Overview
  • Learn to modify the DOM (Document Object Model), one of the core components of every HTML page, with JavaScript.

Syllabus
  • Introduction

    • Welcome
    • What you should know before watching this course
    • Using the exercise files
    1. Getting Started
    • What is the Document Object Model (DOM)?
    • Navigating the DOM with developer tools
    • Testing JavaScript commands with the console
    • Communicating with the console through JavaScript
    2. Selecting the DOM
    • Selecting elements with getElementById
    • Choosing elements by HTML tag
    • Isolating elements by class name
    • Querying CSS to select elements
    • Working with named form elements
    • Understanding nodeType, nodeName, and nodeValue
    • Traversing up and down DOM nodes
    • Targeting node elements
    3. Modifying DOM Attributes and Content
    • Changing HTML attributes
    • Working with restricted attributes
    • Detecting data attributes
    • Controlling classes with the HTML5 classList
    • Targeting the attributes property
    • Using text content modifiers
    • Modifying elements as text
    4. Inserting and Deleting Nodes
    • Creating and appending nodes
    • Controlling node insertions with insertBefore
    • Cloning and removing nodes
    • Replacing existing nodes
    5. The DOM in Action
    • What we'll build
    • Adding a bubbling event listener
    • Creating and styling an overlay with JavaScript
    • Adding an image
    • Resizing images in the DOM
    • Centering an image
    • Handling clicks
    • Adjusting for scrolling
    • Detecting and adjusting for a window resize
    Conclusion
    • Next steps