Software DeveloperProgrammingWriting CodeDevelopment EnvironmentSource ControlDebuggingCode QualityRefactoringDesign PrinciplesDesign PatternsProgramming FundamentalsAPILanguagesDSLsRecursionComputer ScienceApplications of CSMachine LearningComputer NetworkingOperating SystemsComputer EngineeringRoboticsCS TheoryData StructuresDatabase SystemsComputational ComplexityInformation TheoryCryptographyCompressionWeb DevelopmentThe InternetTCPIPHTTPHostingCDNServerAJAXFrontendMaking WebsitesMaking Web AppsRESTSEOHTMLCSSCSS PreprocessorsCSS FrameworksCSS MethodologiesCSS ResetCMSSSGWeb DesignResponsive DesignVisual DesignUX DesignJavascriptDOMES6JQueryMVCBackendServer StackDev OpsCloud

DOM

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.