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

Answer 1

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.

Answer 2

• 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.