What is the real idea behind the concept of Document Object Model (DOM)?

Question

I am beginner into HTML & HTML5.
As I was reading through the following link, i found the terms DOM and DOM API. I read through the Wikipedia, but was not able to digest the whole idea behind it.

Could somebody explain me :

the real idea behind the concept of Document Object Model (DOM)?
how is it related to HTML5?

Thanks,
Sen

possible duplicate of [Confused by relation between DOM and HTML (APIs)](http://stackoverflow.com/questions/4306870/confused-by-relation-between-dom-and-html-apis) — Quentin, Dec 02 '10 at 13:23
@David : i think only the second part of the question is being discussed in the above mentioned stackoverflow link. — Navaneeth Sen, Dec 02 '10 at 13:38

Yuval Adam · Accepted Answer · 2010-12-02T13:30:19.613

From Wikipedia:

The Document Object Model (DOM) is a cross-platform and language-independent convention for representing and interacting with objects in HTML, XHTML and XML documents

Simply put, it's how browsers (amongst other clients) represent web documents. The DOM is not specific to HTML5. It's been there from the get-go.

DOM API basically means how you, as a programmer, can interact with the DOM. Some examples might be adding elements to the DOM, changing their styles, and other common operations you would do on a web document.

In the context of HTML5, there are several additions to the DOM that didn't exist in previous versions of the HTML spec, such as <video> and <audio> elements.

score 3 · Answer 2 · answered Dec 02 '10 at 13:13

The DOM is the browser's internal representation of the HTML document.
The DOM API is the way of programming the DOM, using JavaScript when in a browser.
HTML5 is just a new flavour of HTML. It uses the DOM in exactly the same way.

What Mark Pilgrim is saying is that there are certain things you can do with HTML5 DOM elements through the DOM API, such as start a video file playing. So, if you have a <video> DOM object in JavaScript, you can call its .play() method from JavaScript. This is an example of the DOM API.

score 0 · Answer 3 · answered Jan 10 '14 at 05:59

0

dom is the html representation of the programmed objects , each web page is a collection of DOM objects

answered Jan 10 '14 at 05:59

vicked

1

score 0 · Answer 4 · answered Dec 02 '10 at 13:19

The document object model is the browser's internal representation of HTML. It's based on the idea of 'children'. So a  tag might contain several text nodes and several  tags, like this:

<p><span>Hello,</span> this is some text. <span>It</span> is just a short paragraph</p>

This  tag has 4 children: two s, and two text nodes (this is some text and is just a short paragraph). The other bits of text are children of their respective  tags.

The browser stores this information (instead of just storing a huge stream of HTML, which is very difficult to process) in its internal memory. This makes it much easier to format it using Cascading Style Sheets (CSS) and to make changes to it using JavaScript (create and delete parts, move parts from one parent to another, etc).

All versions of HTML (except perhaps very early ones) use the DOM. Each version has rules, such as which tags are valid, and which can be children to each element. These rules are implemented when processing the HTML and creating a DOM representation of it.

What is the real idea behind the concept of Document Object Model (DOM)?

4 Answers4