Sorry if this is a bit of a thicko question but can someone describe to me in laymens terms what the DOM is and does?
I’ve read a few descriptions and just don’t understand properly what is and what you can do with it.
Either that or a link to a good description of and or tutorials of what you can do with it.
The Document object model is a representation of the structure of all the node in a html document. It provides a way for javascript to interact with all every single node in a html document (it’s essentially an API for html and xml documents).
Every thing in a html document is a node…so a p tag, a div, some text, a list item are all nodes. The Dom representation of a html doc looks like a tree - with the html node at the top and all other nodes underneath.
Once you know how to access the DOM using javascript there’s all sorts of thigns you can do.
Read this:
What elduderino said is correct so I won’t repeat him but add a point.
Back when I was in uni and we started discussing DOM our lecturer said “think of it as a structure diagram or a flow diagram of the code elements in your script/page” to start with and the model, the structure (and how to interact with things) will start to make sense.
A simpler way to look at is like a tree… you have the <html> tag which is the root, <head> and <body> which are branches and then each of those has more branches off of it, the DOM is the representation of this tree and its various branches (so you can target children and parents of each of those areas). 
OK thanks guys! So basically you need to know JavaScript to do anything with the DOM? Are there any software programs that can get you a snapshot diagram of a pages’ DOM?
Also, what sort of things can you do with it? Anyone got any real world examples of DOM scripting in action?
jaspinal, both javascript and CSS use the DOM to target elements to apply style or behavior, that is as simple as it gets. Just view the source of a website and take a look, if an element is within another element (like a paragraph inside a div), the paragraph is a child of the div. DOM Scripting is nothing more than a term for using JavaScript to apply behavior to certain elements by using stuff like getElementById (gets an element by the id attribute).
The DOM is constructed by the browser as it loads a web page. It’s the internal representation of the page – in a hierarchical structure of nodes, as others have said above.
To manipulate the DOM after the page has loaded you’ll need a client-side scripting language. Today that’s equivalent to JavaScript (or JScript for IE users). You can add, replace, change and delete nodes from the DOM, making the page very dynamic. Be aware, though, that this can cause major accessibility problems if you don’t do it the right way.
Most browsers have a built-in developer’s tool these days (except Firefox, where it’s available as a separate extension, Firebug). These will let you inspect the DOM and, often, even manipulate it.
That is a question that is more appropriate for the JavaScript forum.
You may view a common ‘real world’ example in demo form here, Swapping images with javascript.
As Tommy said, further questions now belong to the js forum.
cheers,
gary
Anything which involves changing the page content in any way without reloading the entire web page is a real world example of using the DOM.
These illustrations may help:
This illustrates how one would interface with the DOM API using javascript:
(Note, browser differences not accounted for in the last diagram)
Don’t forget the dom is used in different smls, not just html.
In layman’s terms the dom allows you to do crap with elements (<p>,<div>,etc.).
For example, lets say you wanted to change the text size of a <p> from 10 to 14px. You would use JavaScript and a DOM method (this is all written in JavaScript) to edit the <p> element.
There could be more than just one <p> element on your page especially if your an exciting writer, so you usually want to give the <p> an identifier if you want to do this. Best way is to give it an id.
<p id="myp">
You might be curious how the JavaScript would look. Are you? Ok so it goes like this:
document.getElementById("myp").style.fontSize="14px"
Now that’s equivilant in html terms that the <p> element looks like this now.
<p id="myp" style="font-size:14px">
Now you want to make the font color green since its your favorite color. It’d look like this:
document.getElementById("myp").style.color="green"
<p id="myp" style="font-size:14px; color:green">
There’s other ways you can grab <p> and play with other elements, you are not confined to the id identifier. But that’s the best way a noob like you would understand the concept.
Hope that helps some, jaspinal, cheers.
DOM also doesn’t have to involve JavaScript. DOM is language-independent. You can use it to read XML documents in PHP, Python, or C, for example.
It’s just a way to read and modify an (X)HTML/XML document from a programming language.
The way I see it, it’s what’s been said above, but the DOM also includes the methods and properties that are used to access the window, document and its elements via JavaScript. That is, methods like addEventListener and removeChild are not a part of JavaScript, but a part of the DOM. But there is lots of overlap between JavaScript and the DOM, because their methods and properties can seamlessly interact with each other. For example:
document.getElementsByTagName('a')[2].getAttribute('href').substring(0,3)
That snippet includes stuff from both the DOM and JavaScript. getElementsByTagName is not a part of the JavaScript language, but it’s a part of the DOM, and substring is a method of JavaScript’s String object. So, the DOM is the “tree” as well as the functions and properties used to manipulate it.
I would love to be corrected on this, as this is my own interpretation which I’m a bit hazy on. What is the consensus?
What you say is correct, and can be verified by looking at the ECMA262 spec and the relevant DOM specs that define e.g. getElementsByTagName.
JavaScript is made up of three parts.
The DOM is a part of JavaScript, it just isn’t a part of ECMAScript.
Arguably you could also attach JScript (Microsofts implementation) onto the end of that as it somewhat behaves differently to conventional JavaScript.
Maybe this matches what most people think of “JavaScript”, but if you ask a browser developer working with the javascript engine, he would likely shoot you for claiming that the DOM is part of javascript. I know because I sit literally in the office next to three of Opera’s javascript developers.
I don’t know what you’re referring to here.
The way those developing the browsers look at things will of course be different than the way those using it look at it. While those developing JavaScript need to treat them seperately so as to follow the EXCMA standard for the core component, the DOM standard foir the DOM component and their own standard for the BOM component those writing JavaScript need to work with all three parts in order for their script to work and since they are working with the JavaScript DOM and not the PHP DOM (or whatever) then the version of the DOM they are working with is a part of JavaScript to those writing JavaScript programs.
Haven’t you ever looked at the JavaScript commands for getting the viewport size or other info about the browser itself which have nnothing to do with the document in the web page (accessed via the DOM) and which are not a part of the ECMA standard. Those working with programming in JavaScript refer to those commands that interact with the browser itself for which there are no standards on what the browser provides for doing so as the Browser Object Model.
For example there are three different ways of accessing the viewport width and height depending on which browser you are using and so to write cross browser code you need to use feature sensing to detect which of the three different BOM that the current browser is using. If there were a BOM standard then there’d only be one way used by browsers to do this instead of three. We’re just lucky most browsers copied the way Mozilla introduced so as to not end up with hundreds of different ways.
You don’t switch programming languages in the middle of a statement. If a DOM or BOM reference is in the middle of a line of JavaScript code then you are using JavaScript to make that reference. Certainly trying to use the PHP DOM code there will NOT work.
The Document object model is a representation of the structure of all the node in a html document. It provides a way for javascript to interact with all every single node in a html document (it’s essentially an API for html and xml documents).
Every thing in a html document is a node…so a p tag, a div, some text, a list item are all nodes. The Dom representation of a html doc looks like a tree - with the html node at the top and all other nodes underneath.