Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
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:
<a href="javascript:window.open('page.html')">my page</a><br />
<a href="#" onclick="window.open('page.html')">my page</a><br />
<a href="page.html" onclick="window.open(this.href)">my page</a><br />
Those get progressively better, but they're not ideal. The best solution is to form your link like this:
<a href="page.html" class="popup">my page</a>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() {
if (!document.getElementsByTagName) return false;
var links = document.getElementsByTagName("a");
for (var i=0; i < links.length; i++) {
if (links[i].className.match("popup")) {
links[i].onclick = function() {
window.open(this.href);
return false;
}
}
}
}
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 ;)
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 to 11 of 11