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

JavaScript JavaScript and the DOM (Retiring) Responding to User Interaction Listening for Events with addEventListener()

Nicholas Wallen
Nicholas Wallen
12,278 Points
Posted by Nicholas Wallen
Nicholas Wallen
12,278 Points

What exactly is the point of learning the DOM?

I get what it does. But what is the point of it?

I get it allows us to manipulate things on a page right in front of us, but is it more just for development purposes? Because it's obviously not a finished webpage that is open to the public.

Guess I just don't understand the point of making massive changes to a page that simply reverts when you click the refresh button.

2 Answers

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there! I know that right now it might seem like you're making massive changes that are easily reset whenever you refresh, and that might be true for these examples. But imagine a site like Asana or Trello where users can make "to do" lists, add projects, contacts and more. It would be impossible to know in advance what that HTML would look like. You have no way to know how many projects or items users will add. It will also be different for user A than it will be for user B. User A might have 3 projects and 25 "to-do" items where user B has 1 project and 35 "to-do". At that point, you will be getting information from a database on the server and using it to fill out those elements of the DOM that reflect this. The examples you are learning here are temporary, but that will not always be the case.

The idea here is that you need your website/app to be flexible and change on the fly. This is how we accomplish that.

Hope this helps! :sparkles:

Tyler Durden
Tyler Durden
2,406 Points
Tyler Durden
Tyler Durden
2,406 Points

I'll give you the best advice on why you need to know the DOM model, in less than a paragraph :

Go build a website right now, a portfolio website, and try to make it interactive. Add some EVENT LISTENERS and such to listen to mouse hovers on images, clicks on div boxes, mouse leaves, key presses and ALL THAT GOOD STUFF.

Now when you try to make your site interactive with JavaScript, you will realize why you need to know the DOM model. It's slightly impossible otherwise (unless you plan to make a completely static webpage with just text and images like wikipedia).