The DOM is the Document Object Model. It is JavaScript's way of storing the elements on a page. Using the DOM, you can acces any element on the page by simply "honing in" on it, so to speak. Here's how it works.
The DOM first stores the current window in what is known as an object. In the window object, there is the document object, which stores the contents of the web page itself. Within the document object are lots of other objects, such as the form object and image object. They store all of the forms and images on the page, respectively.
That's all well and good, but how do you use them? You must simply start with the topmost object on the page, and hone in on the value you're looking for. For example, you can grab the URL of an image on the page like so:
window.document.my_image.src;
This example is simply looking in the current window on the current document for the image named my_image (via the name modifier) and looking at it's src. You can then modify that information, or store it. Yes, that's right - you can change an image after the page has loaded. However, the space allotted for that image isn't modified (Unless you have a browser capable of DHTML; chances are you do). So what you can derive from this is that you can access any modifier in this same way. In IE, you can even create your own modifier and it will store it! This doesn't seem to work in non-IE, though, so avoid using it if you want everyone to have access to your content.
Most objects also have their own predefined functions and variables that store information, and that's mostly what this lesson will be going over. We'll first start with the window object. Here is a function that is within the window object, followed simply by a variable that is stored in it.
var my_window = window.open("web_page.html","page_name","list of features");
window.status;
Window.status gets the contents of the status bar - that bar at the bottom of the screen that shows the destination of a URL when you hover over a link. Using this variable, you can change what it says, and even overwrite the URL that normally appears when you hover over a link.
The real meat of the window object is in the window.open() function, though. As you can see, it takes three parameters, all of which are completely enclosed in their own set of quotes and separated by commas. The first one is the URL of the window it opens. The second is the name that the window will have, and finally, the optional list of features that the window will use. Also notice that I set the open function equal to a variable.
The name of the window is used for one thing. If you want to open another page into that same window, use the open function and give it the same name! It'll then open in the same window, assuming it is still open.
The list of features is an optional parameter. If it isn't included, it'll make a normal window with all of the features included. If you include some features, it will only include those features. If you include only features set to "no", then it will include all of the features except those. Here's a list of features, copied and pasted from webmonkey.com because I'm lazy:
- menubar
- This is the row of functions that appears on most software applications. Normally it includes File, Edit, and a few other items.
- status
- This is the message bar at the bottom of your window. When you move your mouse over an HTML link, the URL appears in the status bar. You may have seen pages that use JavaScript to turn this status bar into a scrolling marquee. I'm not going to show you how to do this. If you want to know, you have to figure it out yourself. "Down with marquees," the monkey cried!
- scrollbars
- This allows scrollbars to appear when necessary.
- resizable
- If resizable is listed, the window can be resized. Be careful of the spelling. I always get it wrong.
- width
- The width of the window in pixels.
- height
- The height of the window in pixels.
- toolbar
- The browser toolbar, which contains the Back and Forward buttons, the Stop button, and the Home button, among others.
- location
- The text area of a browser into which you can type URLs.
- directories
- The directories that Netscape browsers have called "What's new," "What's cool," and so on.
If you don't want that given feature, just set it equal to no, like location=no. For example:
var my_window = window.open("my_page.html","this_window",
"scrollbars=no,resizable=no,height=500,width=350");
Scrollbars and resizable windows default to yes, so you need to specify no if you don't want them there. Oh, and it wraps over to the next line here - it shouldn't do that in the code.
The last weird thing is how I set the open function equal to a variable. This makes the variable a placeholder for the window so you can modify elements of that window from an entirely different window. If you're going to do this, though, it must be in script tags, possibly even the header - I haven't tested to see if it works outside of the header. But I know it won't work as intended if done inside of an onClick event though. The open function will work, but the variable won't.
Once you've opened a new window and set it equal to a variable, you can then modify the contents of the window using that variable, like so:
my_window.document.image.src;
it's exactly the same, except instead of window, you use the variable name. Ain't it cool?
This leads me to my next point. In order to get this stuff to work, you must name your elements using the name modifier. You'll mostly be naming forms, but you may also name images if you are going to be doing any image swapping. When you name an element, you can refer to it's object as the name you gave it from there on in. So if you named an image fudge_ball, you'd access it like this:
window.document.fudge_ball;
That's the gist of the DOM, except for the stuff on the next lesson, of course.