Need help to understand what Document Object Model is?

Question

I am new to JavaScript and I have Googled DOM and found many websites stating that it is a interface/API against an XML/HTML document. However I do not understand what DOM is. Is it the name of the API? Is it a specification that browsers need to follow? Could somebody explain that?

Also, am I using the DOM API directly when writing document.get... or am is that JavaScript which wraps a call to the DOM API?

If anyone could explain how DOM and JavaScript works together and what it is I would really appreciate your help!

The Document Object Model, or DOM, is the interface that allows you to programmatically access and manipulate the contents of a web page (or document). It provides a structured, object-oriented representation of the individual elements and content in a page with methods for retrieving and setting the properties of those objects. It also provides methods for adding and removing such objects, allowing you to create dynamic content.

http://www.brainjar.com/dhtml/intro/

Answer 1

Apart from the other answers, I'd like to add:
Quote w3.org/DOM/:

The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents. "Dynamic HTML" is a term used by some vendors to describe the combination of HTML, style sheets and scripts that allows documents to be animated. The W3C has received several submissions from members companies on the way in which the object model of HTML documents should be exposed to scripts. These submissions do not propose any new HTML tags or style sheet technology. The W3C DOM Activity is working hard to make sure interoperable and scripting-language neutral solutions are agreed upon.

Essentially I view the matter like this:
In browsers you can use scripts that are usually a dialect of EcmaScript (and IE supports VBScript to). Those scripts run in a script-host (be it a browser's ecmascript engine or a stand-alone engine like node.js, wscript/csript, jsdb, javascript-exe, etc).

Since ecmascript is object-based, the core-language inherits/accesses objects, properties and methods from it's (parent) host (just like you could add your own md5-routine as a extra function/object/method to interact with).

So the DOM is essentially a standard in which the objects/properties/methods that are needed to interact with elements in the document but also from the browser (for browser-sniffing etc.) is regulated and in what hierarchical order.

That way, everyone can use a method uniformly called getElementById that is available in document (that is provided by window, just as wscript provides echo instead of alert that a browser's window usually provides to open a new dialog-window with a OK button and a message you provide) and so forth.

You could even compare it with an API.. Only this API is meant to be valid for all compatible browsers of all vendors.

_{Note: I rescued this / my answer from this (now deleted) duplicate where it was the accepted answer.}

Answer 2

See Brainjar's 'introduction to the document object model'. It's very well written and clear. I wish they'd follow it up with more!

Answer 3

First of all, it is a specification by the W3C that the browsers may/should follow (same case as HTML or CSS - in most cases, specification and actual implementation evolves alongside to each other, rather than "first draft, then implement", which results in many browser inconsistencies. That's why I love to use Javascript libraries like jQuery or ProtopyJS that handle many of these inconsistencies for me.).

But in most cases, DOM refers to its actual usage within javascript: instead of parsing HTML tags, JavaScript can access to the parsed nodes of the browser and directly manipulate them (document.getElementById, Node.appendChild and so on).

(EDIT: Found an interesting article on quirksmode about that.)

Answer 4

DOM is an API that allows javascript to manipulate HTML

A DOM is generally represented as a tree hierarchy that allows you to manipulate your HTML page.

Javascript implementations of the DOM allow you to manipulate this tree to be able to add, remove, modify the HTML DOM programatically, allowing you to make your html interactive (add or remove styles on the fly, or even insert html dynamically into the page using javascript).

Mozilla has a published specification for their DOM API on their website here:

• https://developer.mozilla.org/en/dom

Answer 5

The DOM is an API exposed by browsers. It's seperate from ECMAScript and it's a well defined specification in the W3C standards.

The API that's exposed by browsers is an implementation of the DOM. One could argue whether or not the implementation is at the C++ level and whether the javascript API is a proxy or not but that isn't an interesting argument.

Generally the DOM and BOM as well as various html5 specification form the host objects that browsers expose through properties on window

And the host objects are nothing more then the innards a browser is exposing to you so you can manipulate the state of the browser, the state of the page and do communication with outside resources.

Answer 6

JavaScript is merely a programming language.

The Document Object Model is an API (essentially, a set of classes and functions) that allows you to access and modify an HTML document's element tree, using the JavaScript programming language, in a browser, or in another environment altogether, possibly with a different language.