New Cohort Starts:

Donate
← Back to the skill map
Web Interface/Interface & language

The DOM

5 micro-topics in Web Interface, each with the evidence that proves you have it and the written reason behind every link. Before you start, it rests on 2 other domains. Downstream, it holds up 1 domain.

5 topics  ·  depth 5–7 of 16  ·  5 internal links  ·  2 in  ·  1 out

Before you start

Load-bearing links first. Each one says what in this domain rests on what outside it, and why.

JavaScript Core

1 link

load-bearing

Select elements from script rests on Write and call functions

DOM APIs are function calls.

HTML & Semantic Markup

1 link

load-bearing

Select elements from script rests on Choose semantic elements

You select elements that exist in the document.

What you will be able to do

In prerequisite order. Each idea names the artifact that closes it, the market demand that put it on the map, and what it stands on.

Depth 5  ·  procedural  ·  unassisted  ·  M05 §4.7

Select elements from script

Uses getElementById and querySelector

Evidence
Reaches any element from JavaScript
Market anchor
JavaScript · DOM
Rests on
load-bearing

Write and call functions · JavaScript Core

DOM APIs are function calls.

load-bearing

Choose semantic elements · HTML & Semantic Markup

You select elements that exist in the document.

Depth 6  ·  procedural  ·  unassisted  ·  M05 §4.7

Modify content, classes and styles

Changes the page after load

Evidence
Updates the UI in response to data
Market anchor
JavaScript · DOM
Rests on
load-bearing

Select elements from script

You modify what you have selected.

Depth 6  ·  procedural  ·  unassisted  ·  M05 §4.7

Handle events

Attaches listeners and reads the event object

Evidence
Wires an interactive control end to end
Market anchor
JavaScript
Rests on
load-bearing

Select elements from script

Listeners are attached to selected elements.

Depth 7  ·  procedural  ·  unassisted  ·  M05 §4.7

Create and remove elements

Builds nodes programmatically

Evidence
Renders a list from an array
Market anchor
JavaScript · DOM
Rests on
load-bearing

Modify content, classes and styles

Creating nodes extends modifying them.

Depth 7  ·  conceptual  ·  scaffolded  ·  M05 §4.7

Delegate events

Handles events for dynamic children from a parent

Evidence
Handles clicks on rows added after load
Market anchor
JavaScript
Rests on
load-bearing

Handle events

Delegation is event handling moved up the tree.

supporting

Create and remove elements

Delegation solves a problem that appears once you add nodes dynamically.

What rests on this domain

Everything downstream that names an idea here as a prerequisite, grouped by where it lives.

Frontend Testing

1 link

load-bearing

Test user interactions rests on Handle events

Simulated events mirror real ones.

Retool. Retrain. Relaunch.

375 ideas. 17 weeks. No tuition, ever.

Vets Who Code is a veteran-run 501(c)(3). The accelerator is free, remote, and we don’t take a share of your first paycheck.

Free · Remote · 17 weeks · EIN 86-2122804