Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

    • CommentAuthorj.bish
    • CommentTimeDec 12th 2005
     permalink
    Really.

    I know HTML and CSS, and I understand object-oriented programming. But I can't find a clear, plain-language explanation of DOM.

    What is it? Why would a developer want to use it? What are some practical applications of it?
    •  
      CommentAuthorSpookyET
    • CommentTimeDec 12th 2005
     permalink
    DOM (Document Object Model) defines <tags> as Objects, and allows you to do manipulation of those tags via the API. You can add/remove attributes, child nodes, etc.

    <div><p>Hello World</div>

    div.firstChild = p
    p.firstChild = textNode
    p.style = "color: red"

    Read this tutorial: http://www.w3schools.com/dom/default.asp
    • CommentAuthorArun
    • CommentTimeDec 12th 2005
     permalink
    The HTML DOM is the Document Object Model for HTML.

    The HTML DOM defines a standard set of objects for HTML, and a standard way to access and manipulate HTML documents.

    The HTML DOM views HTML documents as a tree structure of elements. All elements, along with their text and attributes, can be accessed and manipulated through the DOM tree.
    •  
      CommentAuthorSpookyET
    • CommentTimeDec 12th 2005
     permalink
    What he meant to say is that it's a tree of objects, which can be manipulated.
    While he stressed HTML, the XML DOM tree is quite similar, if not identical to the HTML DOM.
    •  
      CommentAuthorJohnRiv
    • CommentTimeDec 13th 2005 edited
     permalink

    You say you're familiar with OOP, so you must be an intelligent box of rocks. I do agree the DOM appears to be a mysterious, powerful creature, but defining it doesn't have to be as complex as it seems. I think Peter-Paul Koch's W3C DOM -Introduction is the best basic description of the DOM that I've come across. So go read that first, and if it makes sense, ignore my following short, dumbed-down explanation of it because he figured out what the hell the "DOM" is a long time before I did :P But stick around for my answers to "why?" and an example app. So here we go...


    OK, the HTML Document Object Model is essentially the specifications for what objects can be included in an HTML/XHTML document and how they can be manipulated.


    There is the most basic answer I could come up with. More importantly, let's get into your other questions:


    Why would a developer want to use it? I think a better question is "why would you want to use this fancy 'DOM Scripting' that's getting all this press lately?" The answer to that is very similar to why we use CSS: to separate presentation from content and to degrade gracefully in browsers that do not support what we want to do.

    Back in the day, when you wanted use JavaScript, you probably just inserted a snippet of code into your HTML document wherever it was needed. Like table based layouts, it worked, but it wasn't pretty. Now, when you want to add JavaScript to your pages, you add it via the means of the DOM, and you proudly proclaim "I'm DOM Scripting!" What do I mean by "via the means of the DOM?" That answer is best described with an example:


    What are some practical applications of it? One of my favorite DOM Scripting revelations is the proper way to create a link that opens a popup window. I learned this technique from Jeremy Keith's @media 2005 presentation (see slides 5-9, or just follow along here). You've probably used some or all of these techniques to open a pop-up window from a link:



    &lt;a href="javascript:window.open('page.html')"&gt;my page&lt;/a&gt;<br />
    &lt;a href="#" onclick="window.open('page.html')"&gt;my page&lt;/a&gt;<br />
    &lt;a href="page.html" onclick="window.open(this.href)"&gt;my page&lt;/a&gt;<br />

    Those get progressively better, but they're not ideal. The best solution is to form your link like this:


    &lt;a href="page.html" class="popup"&gt;my page&lt;/a&gt;

    And then use DOM Scripting to have that link open up in a new window. As you can already see, if a browser does not support the JavaScript I'm about to show you that makes this magic work, users will still be able to view the linked content, it will just be in the same window (which is better than not viewing it at all). Enough explaining, onto the magic:


    function doPopups() {
    &nbsp;&nbsp;if (!document.getElementsByTagName) return false;
    &nbsp;&nbsp;var links = document.getElementsByTagName("a");
    &nbsp;&nbsp;for (var i=0; i &lt; links.length; i++) {
    &nbsp;&nbsp;&nbsp;&nbsp;if (links[i].className.match("popup")) {
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;links[i].onclick = function() {
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.open(this.href);
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
    &nbsp;&nbsp;&nbsp;&nbsp;}
    &nbsp;&nbsp;}
    }
    window.onload = doPopups;

    Before you go copy + pasting that script, it's best you understand what's going on. Once the page loads, the doPopups() function is executed. It checks to be sure the browser supports the getElementsByTagName method. If it doesn't it quits (degrading gracefully), otherwise it moves on. Next it creates an array called "links" that contains all the anchor tags (DOM scripting experts will now yell at me because it's technically not an "array", but a "node collection". That works just like an array so I'm sticking with "array" for this discussion). The script then checks each element in the array to see if it has the class "popup" applied to it. If it does, then it adds the popup window functionality to the link.


    Making sense? Hopefully it's starting to. You know you've really got a handle on it when the W3C's definition of DOM is clear to you:


    The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents.


    Aren't you glad you asked? :P


    I'd like to take this opportunity to apologize for my lengthy response to this post and future posts on this board. My writing can get wordy at times. Get used to it ;)

    • CommentAuthorj.bish
    • CommentTimeDec 13th 2005
     permalink
    Don't apologize, JohnRiv -- a lenghty response will help me much more than one or two sentences. I'm new to all of this, but I have quickly become an addict. Information and knowledge are my crack.

    I have a follow-up question, but first some context: I taught myself HTML years ago and gave myself a crash course in CSS about a month ago. I've dabbled a bit in PHP via WordPress. Everything I've been reading about interests me: CSS, Web Standards, AJAX, trends in web development.

    The question: if I were to focus my (limited) time and energy on learning one thing, what should it be? The DOM? JavaScript? PHP? Other?

    Two criteria to consider when answering:

    1. I developed and am maintaining the website for the high school at which I teach, so anything I learn would likely be applied to that site.

    2. I want to be, for lack of a better term, on the cutting edge. In other words, I don't want to learn something that no one will be using in a year. I want to learn what professional web developers are doing, reading about, thinking about, using.

    Many thanks...
    •  
      CommentAuthorJohnRiv
    • CommentTimeDec 13th 2005
     permalink

    I understand the desire to focus your time learning about the next big thing, but proceed with caution. If, for example, you focus your time on becoming an AJAX master because of all the hype around it, but your work requires that you be a PHP guru, you run the risk of ended up with a substandard PHP project with lots of AJAX functionality where it's not really needed.


    I'm not sure what your exact needs are with the high school website, so I can't give a recommendation on that without knowing more about your plans for the project. So I'll just give a general response for yourself and others with limited time. I'd recommend first getting a good grip on CSS and Web Standards, because any website you work on will at least have to incorporate those. You need a foundation to build on. Then move on to DOM Scripting to enhance your work. That's the basis for the "New Professionalism" in web design. (Again, Peter-Paul Koch has written some good advice on the topic).

  1.  permalink
    Well, where should we start.
    You're an inanimate objects in a box AND there's this thing called a conformant implementation which is DOM Level 3 XPath...


    Actually, I don't know either.
    • CommentAuthorkime
    • CommentTimeDec 7th 2009
     permalink
    I have been banned cause I'm an idiot
    <a href="http://www.vponsale.com">wedding dresses</a>
    <a href="http://www.vponsale.com/invitations/">wedding invitations</a>
    <a href="http://www.vponsale.com/bridesmaid-dresses/">bridesmaid dresses</a>
    <a href="http://www.rs2guru.com">wedding invitations</a>
    <a href="http://www.vponsale.com/wedding-dresses/">wedding dresses</a>
    <a href="http://www.vponsale.com/invitation/">wedding invitations</a>
    <a href="http://www.vponsale.com/bridesmaid/">bridesmaid dresses</a>
    <a href="http://www.owigs.com/">lace front wigs</a>
    <a href="http://www.owigs.com/">lace wigs</a>
    <a href="http://www.vponsale.com/index.php?main_page=index&cPath=284">bridal gowns</a>
  2.  permalink
    I have been banned cause I'm an idiot
  3.  permalink
    I have been banned cause I'm an idiot
    Net4Sale is an IT solutions company targeted to service the IT needs of SME’s in UK and Canada. Net4Sale is backed by Server4Sale LLC which has been a pioneer in the IT industry.
    We integrate all our skills and knowledge by infusing unique methods we add life to dull and boring online businesses. Our strategy client oriented and very simple that is to offer unmatchable services at cost effective rates which are benchmark for others to follow. All these years we have always focused more on our client’s credibility, quality and reliability.
    Just click on http://net4sale.net and feel the difference
Add your comments
    Username Password
  • Format comments as (Help)