javascript objects vs DOM objects

Question

this is maybe a stupid question, but when I search for an answer I get jQuery results that talk about object arrays. I'm not there yet and want to understand how javascript itself is interacting with the DOM.

The DOM is an object tree created and used to render HTML if I'm not mistaken? And javascript has objects of the same name. For example: window, document, and elements with id... Are these the same objects?

I've read that javascript is part of HTML5, is this because the javascript objects are in fact the DOM objects and that the javascript language has been built up around the DOM? If so, how could it ever be possible to use javascript without the DOM? - For example, how could you ever make a desktop app? I use a program called brackets which is coded in javascript.

To answer your last question, the DOM is a set of objects used for interacting with a webpage. JavaScript is a general-purpose programming language, and when you execute JavaScript in a browser, it has access to the DOM. Take out the DOM and you still have a programming language. — JLRishe
– JLRishe, Commented Jun 6, 2014 at 8:48
You wrote that I've read that javascript is part of HTML5. Where did you find it? I guess JavaScript itself is neutral from HTML5. — naota
– naota, Commented Jun 6, 2014 at 9:34

Matt · Accepted Answer · 2014-06-06 09:03:01Z

I think MDN has a great definition:

The Document Object Model (DOM) is an API for manipulating HTML and XML documents. It provides a structural representation of the document, enabling you to modify its content and visual presentation by using a scripting language such as JavaScript.

So the DOM is the specification of an API which can be used to select, manipulate and create new elements in a webpage, via an API.

That API is made visible (or exposed) to us, JavaScript developers, by allowing us to access JavaScript objects which implement particular parts of the DOM API.

The window element is one of those; as MDN says

The window object implements the Window interface, which in turn inherits from the AbstractView interface.

window is the JavaScript object window.
... it implements the DOM Window interface
... which, behind the scenes (we don't really care about this) inherits the AbstractView interface.

However, as well as implementing the DOM Window interface, window also exposes several JavaScript types and functions; which are not part of the Window interface, but exist on the window object.

All the types; window.String, window.Object, window.Array.
Math
...

As you specifically mentioned document; document is part of DOM Window interface, which you can see listed here.

In short, anything which involves selecting, manipulating and creating HTML elements will usually be part of the DOM.

HTML5 is the latest HTML standard which add new HTML elements such as <audio> and <video> tags. The DOM API has been updated to allow those new elements to be controlled by the API.

In turn, the JavaScript objects which implement those API's have to be updated.

JavaScript is a programming language. The DOM can be thought of as a framework or library which lets you control HTML from JavaScript.

JavaScript can be used completely standalone, without this library; which is exactly what happens in environments such as NodeJS and Brackets.

stackunderflow · Accepted Answer · 2014-06-06 09:35:59Z

1

Take it this way:

You need an environment and a program.

The environment is the browser
The program has :
an interface( web page aka document)
code (javascript)

So you end up with 3 object models

DOM document object model
BOM browser object model
JOM javascript object model

The following graph may help:

http://javascript.info/tutorial/browser-environment

answered Jun 6, 2014 at 9:35

stackunderflow

3,8835 gold badges34 silver badges46 bronze badges

Collectives™ on Stack Overflow

javascript objects vs DOM objects

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related