The DOM: What's the Document Object Model?

Channel:

freeCodeCamp.org

Subscribers:

10,700,000

Published on September 21, 2015 2:51:39 AM ● Video Link: https://www.youtube.com/watch?v=80Mr2Z6Qikc

Duration: 2:49

75,628 views

1,033

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!")