views:

183

answers:

4

What is the difference between JavaScript and DOM? id DOM related to firefox? is DOM just a source order of HTML elements?

+7  A: 

DOM stands for Document Object Model and, as you could guess from the name, represents the structure of an HTML/XML document in a platform/browser independent way. The DOM also provides an API to manipulate the DOM, with functions like getElementsByTagName and createElement.

JavaScript is a programming language that web browsers can execute. JavaScript can interact with the DOM with DOM scripting.

Edit to answer your question in a comment: For example, the browser downloads the HTML along with any referenced JS and CSS (and images, Flash etc.). The browser constructs the DOM from the HTML and renders it using the rules specified in the CSS. JS may manipulate the DOM when the page loads, when the user does something, or when any other event happens. When the DOM changes the browser updates what is displayed.

David Johnstone
So Javascript and DOM scripting is a different thing?
metal-gear-solid
@metal-gear-solid You use JavaScript to do DOM scripting. DOM scripting is when you manipulate the DOM with JavaScript.
David Johnstone
@David - Can you explain in a simple example relation of Browser, DOM and Javascript.
metal-gear-solid
@David - I found and see this article http://shapeshed.com/journal/dom_css_a_beautiful_couple/ but it's just as we use CSS. Does like Javascript , CSS also works on base of DOM?
metal-gear-solid
@metal-gear-solid I've updated my answer to [hopefully] answer these questions :-)
David Johnstone
+1  A: 

Simply put, JavaScript allows you to manipulate the DOM AKA Document object model that controls the client side scripting.

jini
So DOM is a part of every browser?
metal-gear-solid
@metal-gear-solid. Not necessarily, but all the major browsers attempt an implementation. Sometimes the implementation is imperfect. DOM assumes that the underlying memory model will be mappable to a tree structure where each node except the root will have a single parent node. This isn't always true in IE.
Alohci
A: 

MDC DOM

The Document Object Model (DOM) is an API for HTML and XML documents. It provides a structural representation of the document, enabling you to modify its content and visual presentation. Essentially, it connects web pages to scripts or programming languages

While JavaScript is the programming language which will allow you to operate on the DOM objects

hope that clears it up

Narayan
CSS selectors also works on DOM, am i right?
metal-gear-solid
@metal-gear-solid - No. DOM is an API. CSS selectors do not use that API.
Alohci
+5  A: 

As others have said, the DOM (*D*ocument *O*bject *M*odel) is essentially the API one uses to manipulate an HTML (or XML) document -- usually using JavaScript, since that's the language we have in the browser, but not always, as there are DOM-like APIs for manipulating these documents in other languages on the server side or the desktop, for example: http://java.sun.com/j2se/1.4.2/docs/api/org/w3c/dom/package-summary.html .

JavaScript is just a programming language. It happens to be the de facto standard scripting language for most (if not all) web browsers, and so in practice, most of the time when you're writing DOM manipulation scripts to be run on the client side, you're working with both the DOM and JavaScript at the same time.

However, It doesn't have to be like that. Someone could write a web browser (or a plugin for a web browser) that lets programmers write their DOM-manipulation scripts in Python, Ruby, C, Scheme, etc (in fact, JavaScript started life at Netscape as a Scheme).

Also, there are JavaScript interpreters (and even compilers) that run completely outside web browsers. In fact, if you want to get a feel for what the core JavaScript language is, you might try doing a little bit of scripting using Mozilla's Rhino: http://www.mozilla.org/rhino/ . There's no default DOM, no window object, nothing associated with a browser by default (though you can import some Java DOM packages).

I'd also recommend reading the old JavaScript 1.5 spec over at MDC (http://developer.mozilla.org/en/Core_JavaScript_1.5_Guide ) and some of their material on the DOM (http://developer.mozilla.org/en/DOM ).

Weston C
+1 thanks for this useful info
metal-gear-solid