JS: DOM API

Included in the course

What you'll learn

• Bring web pages to life by adding interactivity to them
• Interact with any elements on the page, select them or change them
• Ensure JavaScript works universally in any browser
• Handle forms correctly
• Make AJAX requests to the server
• Use JQuery to handle DOM

Description

The browser is a special environment in which JavaScript gets the opportunity to interact with loaded website pages. To do this, the browser provides special objects with a large number of methods. With their help, we can perform any HTML transformations, adding interactivity to the page. No matter what framework or library is used, they all eventually work through these objects. Knowledge of this topic is the basis of front-end development, on which everything else is strung.

Course program

• 1

  Introduction

  Learn about the course and its objectives

  theory
• 2

  JavaScript in the browser

  Learn to use js in the browser. Learn about the differences between server and client js.

  theory

  quiz

  exercise

• 3

  Global Window Object

  Learn why and how to use the window object

  theory

  exercise

• 4

  BOM objects

  Learn the objects that allow you to control the browser through JavaScript

  theory

  quiz

  exercise

• 5

  What is DOM?

  Learn how HTML differs from DOM

  theory

  quiz

  exercise

• 6

  Navigating the DOM Tree

  Learn the DOM tree structure. Learn to navigate it.

  theory

  quiz

  exercise

• 7

  Declarative DOM tree search

  Learn the search methods: getElementById, querySelector and others.

  theory

  quiz

  exercise

• 8

  DevTools

  Learn how to use the developer tools in the browser.

  theory

  quiz

• 9

  Manipulating the Dom tree

  Learn how to change the DOM tree, add and remove elements.

  theory

  quiz

  exercise

• 10

  Managing DOM Nodes

  Learn to modify elements. Understand the difference between attributes and properties.

  theory

  quiz

  exercise

• 11

  Polyfills

  Learn how to level differences between browsers when working with the DOM

  theory

  quiz

• 12

  Introduction to events

  Explore the event model of the browser. Learn the basic events and their features of work.

  theory

  quiz

  exercise

• 13

  Events in practice

  Learn how to create interactive components

  theory

  exercise

• 14

  Forms

  Learn how to handle forms

  theory

  quiz

  exercise

• 15

  Capturing and bubbling

  Understand the stages of events. Learn how to capture an event and stop it from propagating.

  theory

  quiz

  exercise

• 16

  Document Events

  Learn events that occur when loading and unloading a document.

  theory

  quiz

• 17

  AJAX

  Learn how to execute AJAX requests using the modern browser API - fetch

  theory

  quiz

  exercise

• 18

  JQuery

  Learn to use the jQuery library. Find out why it is required in every job, but companies discontinue to use it.

  theory

  quiz

  exercise

• 19

  Do it yourself

  Some additional tasks to help you consolidate the theory you've learned
• 20

  Additional resources

  Some materials the Hexlet team have picked up. This will give you a more in-depth understanding of the topic

Challenges

We recommend working on these challenges after completing the course. They'll help you obtain more experience in programming and strengthen your new skills.