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
Sandeep Krishnan
9,730 Pointswhat's a DOM and what is traversing ?
Can someone please tell me in plain english - What is traversing, manipulating a DOM and event management actually mean ?
4 Answers
egaratkaoroprat
16,630 PointsHi Sandeep!
I will try: The DOM is actually the model of an HTML document. The root of the DOM is the document object and it consist of children. Those childrens are the HTML tags you see (including <html>,<head>,<body>, etc.).
Those children on the other hand, have children as well, if I can use an analogy then the document object would be god, <head><body> are Adam and Eve and the <title> tag inside the <head> would be Kain or Abel - your choice. :-) While the document object is the ancestor of all tags.
Each of these elements are called nodes and elements on the same level (Example: <h1> and <p> below it) are called siblings and they share the same parents.
The DOM is used in most cases by JavaScript to be able to select elements of a document to further manipulate (changing its behavior, for example you can remove, hide an element or change the attributes of it - you name it), traverse through (traverse means moving around the DOM - for example, if you select a <li> but want to select the <p> inside of it, you have to go one level down).
Events are some kind of actions the user needs to do in order to trigger an effect that you have programmed. Examples of events are mouse click, key press, hovering over e specific area, etc..
I hope I didn't confuse you too much. Feel free to ask.
In essence, the DOM is just another way to represent your HTML document where it is possible for JavaScript to get its hand on. The DOM is the map for JavaScript (and other languages) to find elements inside an HTML document.
Sandeep Krishnan
9,730 Pointsthanks Egarat for taking time to explain. I have understood the gist now. May I ask a follow up question. Why do we need to manipulate HTML via the DOM, why can't we simply do and rewrite the same in HTML page. Is DOM like a placeholder for each Javascript instance, where by JS can manipulate the DOM without impacting the source code ? Why do we need DOM when we have HTML pages which can be directly accessed ?
Kevin Korte
28,148 PointsThe DOM is your source code. It can be different than your html, cause as you saw we can dynamically add in, remove or manipulate what is there. So when we're showing a webpage, we refer to what is being shown as the DOM, or Document Object Model.
Just think of it like this. You write your html, and when that html hits a browser, it's now called the DOM, again, because the DOM can, and usually is different that what is actually coded in your html templates.
egaratkaoroprat
16,630 PointsYou don't want your HTML document all the time as HTML itself is static (exception being server side programming, as they 'generate' HTML documents). But sometimes you want to add interactivity, those changes are not permanent - moving images, form validation when the user enters incorrect information, warning messages for leaving a form input blank, hide a lightbox with a click, etc... With HTML alone this is not possible.
And the DOM is the interface for JavaScript to take on an HTML document. As you might have seen in some galleries, when you click on a thumbnail, a lightbox opens with the bigger image and when you click on it, it disappears. In order for JavaScript to know what to do, you have to tell JavaScript that when the user clicks on the big image, the lightbox should be removed/hidden and here is when DOM is necessary: Let's say the big image is inside a div so you can have some place to put a little description text below the image etc. In this case you have to tell JavaScript that when <img> is clicked it should remove/hide the parent <div> of it.
Sandeep Krishnan
9,730 PointsThank you Kevin and Thank you Egarat. I have got a hang more-or-less, i think. Thank you for taking time to explain this in detail. I understand, and I could be "off" but a DOM will help me manipulate the browser without touch the source code for a very short period of time. e.g. when thumbnails are clicked and they enlarge- they pre much don't need an entire change in HTML code