What is the difference between JavaScript and DOM?

Question

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

Solution 1

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.

Solution 2

As others have said, the DOM (Document Object Model) 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 ).

Solution 3

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

Solution 4

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

View more solutions

Comments

[Jitendra Vyas]

So Javascript and DOM scripting is a different thing?

[David Johnstone]

@metal-gear-solid You use JavaScript to do DOM scripting. DOM scripting is when you manipulate the DOM with JavaScript.

[Jitendra Vyas]

Can you explain in a simple example relation of Browser, DOM and Javascript.

[Jitendra Vyas]

I found and see this article 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?

[Jitendra Vyas]

So DOM is a part of every browser?

[David Johnstone]

@metal-gear-solid I've updated my answer to [hopefully] answer these questions :-)

[Alohci]

@metal-gear-solid - No. DOM is an API. CSS selectors do not use that API.

[Alohci]

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

[Marshall Alsup]

Very lucid answer. This cleared up some confusion I had. Thanks!

[eurica]

please correct me if I am wrong. According to forums and comments I have read, DOM is like an idea? I mean like Subversion, you can do subversion in different ways for example GIT and SVN. And for DOM you can manipulate html elements with javascript.

[Suraj Jain]

API (HTML or XML page) = DOM + JS (scripting language), from Introduction to DOM, mdn.