What it is

The DOM, or Document Object Model, is part of the browser’s javascript API used for manipulating HTML. Here’s some examples of using the DOM to manipulate the contents of a page.

To nitpick, the DOM is technically an interface specification that can be implemented in many programming languages and can be used on any XML-like syntax, such as SVG, but it is rare to think about it outside of the javascript/web browser context.

Many don’t like working with the DOM API directly, leading to the popularity of libraries that wrap it, such as JQuery.

Why it matters

Nowadays, it may be possible to forgo learning how to use the DOM API by jumping directly to using JQuery or other web frameworks, but to do so will limit your ability to understand what those libraries are doing under the hood. Since libraries like JQuery are just wrappers on top of the DOM API, using it directly will almost always run faster.

The tradeoff is that code that does DOM manipulation is typically difficult to maintain. See two-way data mapping.

Even using a modern framework like React or Angular, you’ll still occasionally run into situations where doing some direct DOM manipulation is handy, so it is worth learning.

How to learn it

There’s plenty of links to use to learn the DOM in the frontend dev handbook.