12 replies [Last post]
larmyia
Offline
Elder
London
Last seen: 12 years 40 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

Hi...don't laugh, but I only vaugly understand what DOM is. could someone please explain it in a non-jargon fashion. what it is and how it works and why we need it.

I think it's something to do with JavaScript and JScript, Netscape and IE, and getting them all to work.

apprecaite it.

larmyia

Tags:
Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 39 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

DOM...what is it?

http://www.w3.org/DOM/

Simply, its a representation of the browser loaded webpage (document) in a form that is accessible and modifiable by scripting languages like javascript. By using scripts to manipulate the document you can alter the webpage and achieve effects that can not be achieved with HTML+CSS alone.

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 4 years 6 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

DOM...what is it?

A more traditional take on the DOM can be found here

Oh, I love pushing that submit button.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

antibland
antibland's picture
Offline
Leader
Pittsburgh
Last seen: 12 years 24 weeks ago
Pittsburgh
Joined: 2005-01-17
Posts: 603
Points: 0

DOM...what is it?

DE, After not sleeping all night and looking at that, you seriously freaked me out.

take that.

AntiStability

larmyia
Offline
Elder
London
Last seen: 12 years 40 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

DOM...what is it?

Chris: I'd already read the link, and I didn't really understand properly. can you give me an actual example?

David: I knew someone would go to the gutter Wink

AntiSleep(?): stop showing off your gun toting chick!

larmyia

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 4 years 6 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

DOM...what is it?

antibland wrote:
DE, After not sleeping all night and looking at that, you seriously freaked me out.

take that.
I'm in love . . .

DE :twisted:

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

antibland
antibland's picture
Offline
Leader
Pittsburgh
Last seen: 12 years 24 weeks ago
Pittsburgh
Joined: 2005-01-17
Posts: 603
Points: 0

DOM...what is it?

Quote:
I'm in love . . .

with Mrs. Elliot. Behave, dog. Where's the right emoticon when you need it? Shucks.

AntiInfidelity

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 4 years 6 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

DOM...what is it?

OK - I'll behave (said in my best Austin Powers voice)

Seriously, what you should do is fire up Firefox's DOM Inspector (Not part of standard install - you have do do a custom install and check the "Developer tools" option in the install process. (This is not the same as the Developer Tools Extension!))

When you have it installed, activate it with a [Ctrl+Shift+I] or [Tools|DOM Inspector]. The DOM Inspector displays a hierarchical tree of the document nodes. Think of a node as the beginning of any nested construct. Each node can be opened to reveal the contents along with any class or id details. The ids are particularly important because they give handles on particular document sections that can then be manipulated with Javascript.

I think that after you have played with the DI for a while you get a much better appreciateion of how the browser sees a document. It also helps explain the dot-separated object naming convention since object names represent the nodal hierarchy.

See, I can be serious when I have to be.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

larmyia
Offline
Elder
London
Last seen: 12 years 40 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

DOM...what is it?

David,

I had actually already installed it (before I even knew what it was!). just opened it. so, you can look on there to find where you want to apply some JavaScript? can't you just look at your xhtml or css? or is this to make it easier?

larmyia

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 39 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

DOM...what is it?

it makes debugging easier, also checking out computed styles and applicable style rules too.

Do you have a handle on objects as in object oriented programming?

When your webpage is loaded into the browser it creates a document object - which pretty well corresponds to the <html> tag. That object has various properties and methods, included in those properties is a structure which contains objects that represent all the elements of your web page.

The document object model defines that structure. It defines the objects used to represent each HTML element, and consequently their properties and the methods by which they can be manipulated.

The DOM standardises how the rendered html page is represented to scripts. Armed with that standard you can write javascripts to manipulate the page in the knowledge that those scripts will work irregardless of the browser used to display the page.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 4 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

DOM...what is it?

Hi larmyia,
I find this http://www.mozilla.org/docs/dom/domref/ really useful for learning about the DOM

larmyia
Offline
Elder
London
Last seen: 12 years 40 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

DOM...what is it?

Thanks Tony, that was really interesting. as is usual in computing, it's helped me understand what I didn't get, but introduced new things that I still don't get! I think as mentioned, using it will bring greater understanding!

larmyia

lordelric
lordelric's picture
Offline
Regular
Chicago-land
Last seen: 16 years 14 weeks ago
Chicago-land
Timezone: GMT-6
Joined: 2005-03-20
Posts: 37
Points: 0

Faking the DOM

Thanks to all for those thoughts on the DOM. It was something that I never felt I understood. Now at least I might be able to fake my way through it.