CODEWITHSUNDEEP
domhtml
Navaneeth Sen
Navaneeth Sen

Reputation: 6466

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

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 :

Thanks,
Sen

Upvotes: 5

Views: 905

Answers (4)

vicked
vicked

Reputation: 1

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

Upvotes: 0

Yuval Adam
Yuval Adam

Reputation: 165232

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.

Upvotes: 5

Nathan
Nathan

Reputation: 11149

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

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

This <p> tag has 4 children: two <span>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 <span> 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.

Upvotes: 0

Skilldrick
Skilldrick

Reputation: 70819

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

Upvotes: 3

Related Questions