The DOM: What’s the Document Object Model?

The DOM is the browser’s internal, progrematic representation of a webpage. Languages like javascript allow you to modify the DOM, and thus the website without editing the HTML of the page.

Technically, the DOM is an API (application programming interface). There are many types of APIs, but this particular API interacts with XML and HTML documents. It’s in charge of how those documents are accessed and manipulated.

Really, you can do a lot with the dom, and if you’re already scripting in JS and jQuery, you’re already doing it.

You can insert new things, elements, or alter style or content for elements that already exist.

This can be done with pure javascript, like:
document.getElementById(id)
element.getElementsByTagName(name)
document.createElement(name)

You can also use libraries like jQuery to simplify, standardize and automate manipulating the DOM, like:
$(‘#box2’).append(“This will be added to box2!”)

source