SitePoint Sponsor

User Tag List

Results 1 to 21 of 21
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Location
    Blackpool, UK
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    What exactly is the DOM?

    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.

  2. #2
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    http://www.w3.org/TR/REC-DOM-Level-1/introduction.html

  3. #3
    SitePoint Addict FizixRichard's Avatar
    Join Date
    May 2003
    Location
    UK
    Posts
    372
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.
    FIZIX - Full Service Digital Agency - Engaging websites, apps and games.
    Follow us @FIZIXAgency

  4. #4
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    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).

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Location
    Blackpool, UK
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  6. #6
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    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).

  7. #7
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jaspinal View Post
    OK thanks guys! So basically you need to know JavaScript to do anything with the DOM?
    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.

    Quote Originally Posted by jaspinal View Post
    Are there any software programs that can get you a snapshot diagram of a pages' DOM?
    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.

    Quote Originally Posted by jaspinal View Post
    Also, what sort of things can you do with it? Anyone got any real world examples of DOM scripting in action?
    That is a question that is more appropriate for the JavaScript forum.
    Birnam wood is come to Dunsinane

  8. #8
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jaspinal View Post
    Also, what sort of things can you do with it? Anyone got any real world examples of DOM scripting in action?
    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
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  9. #9
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,789
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  10. #10
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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)
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  11. #11
    SitePoint Evangelist bals28mjk's Avatar
    Join Date
    Aug 2007
    Posts
    405
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Code:
    <p id="myp">
    You might be curious how the JavaScript would look. Are you? Ok so it goes like this:
    Code:
    document.getElementById("myp").style.fontSize="14px"
    Now that's equivilant in html terms that the <p> element looks like this now.
    Code:
    <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:
    Code:
    document.getElementById("myp").style.color="green"
    Code:
    <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.

  12. #12
    SitePoint Wizard
    Join Date
    Mar 2008
    Posts
    1,149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  13. #13
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code JavaScript:
    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?

  14. #14
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Raffles View Post
    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:
    Code JavaScript:
    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.
    Simon Pieters

  15. #15
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,789
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    JavaScript is made up of three parts.

    1. The core section defined by ECMA262
    2. The Document Oblect Model
    3. The Browser Oblect Model (which doesn't have a standard but all browsers except IE usually follow the way Firefox does it)

    The DOM is a part of JavaScript, it just isn't a part of ECMAScript.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  16. #16
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Arguably you could also attach JScript (Microsofts implementation) onto the end of that as it somewhat behaves differently to conventional JavaScript.

  17. #17
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    JavaScript is made up of three parts.

    1. The core section defined by ECMA262
    2. The Document Oblect Model
    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.

    Quote Originally Posted by felgall View Post
    3. The Browser Oblect Model (which doesn't have a standard but all browsers except IE usually follow the way Firefox does it)
    I don't know what you're referring to here.
    Simon Pieters

  18. #18
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,789
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by zcorpan View Post
    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.
    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.

    Quote Originally Posted by zcorpan View Post
    I don't know what you're referring to here.
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  19. #19
    SitePoint Member
    Join Date
    Jul 2009
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    -------------------------------------------------------

  20. #20
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  21. #21
    SitePoint Enthusiast antitoxic's Avatar
    Join Date
    Apr 2008
    Location
    London, UK
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cooper.semantics View Post
    Quote Originally Posted by w3.org
    The Document Object Model is a platform- and language-neutral...
    Well having this in mind and :
    Quote Originally Posted by Raffles
    ...That is, methods like addEventListener and removeChild are not a part of JavaScript, but a part of the DOM....
    How would one attach events using other than JavaScript ? If there's such thing (for example in php DOM ) it will be working only for the duration of the script, which is not very useful.
    Isn't DOM the very essential via which we can manipulate objects and the rest is utilities handled by the programming language used. For example php does not require having events , therefore does have them.
    Based on this, DOM should be only the base, the tree and all methods for modifying it.
    Quote Originally Posted by felgall
    ...BOM....
    Couldn't we, the developers, vote for unifying the BOM so that everything is much more clear and frameworks would be much lighter. Or is it matter of proprietary software.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •