Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

General Discussion

brandonlind2
brandonlind2
7,823 Points

Isn't the DOM made from html?

I'm a bit confused about the DOM I thought its was tree of html tags? however mdn describes it as "The DOM is an API that allows access to and modification of the current document. It allows manipulation of document Node and Element. HTML, XML and SVG have extended it to manipulate their specific elements."

I'm confused because if html was extended to manipulate it wouldn't that imply that the DOM is something separate from the html?

4 Answers

Tushar Singh
PLUS
Tushar Singh
Courses Plus Student 8,692 Points

DOM is a model of a document with an associated API for manipulating it.

HTML is a markup language that lets you represent a certain kind of DOM in text.

Basically in plain english DOM is the tree model to represent HTML or The Document Object Model (DOM) is a language-independent model made up of objects representing the structure of a document. HTML is one language for writing such documents.

brandonlind2
brandonlind2
7,823 Points

So the DOM is independent from html but html is used to manipulate it similarly to how javascript isnt html but can manipulate it? the DOM is more then an html file then?

Tushar Singh
PLUS
Tushar Singh
Courses Plus Student 8,692 Points

JavaScript is a language that the browser reads and does stuff with. But the DOM is where that stuff happens.

Imagine you have an empty element like this in your HTML:

<div id="container"></div>

you can manipulate it with javascript

<script>
  var container = document.getElementById("container");
  container.innerHTML = "New Content!";
</script>

On the screen you'll see New Content! rather than nothing, because that empty div was filled with some "New Content"

It would be like this

<div id="container">New Content!</div>

Simply put, JavaScript allows you to manipulate the DOM AKA Document object model that controls the client side scripting.

Konrad Pilch
Konrad Pilch
2,435 Points

Id say Brandon, go with some JS basics, and ud soon understand what it means. Or chekc this maybe https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it

But i will say This is the tree: document->html , in html you have body, in the body you have wesbite. if that helps.