I'm having an extremely hard time grasping the DOM model. I don't know what is referred to when I say "this", the window or the frame I am on. And other little things that halt my programming. I was wondering if there are any good tutorials anyone knows about?

There are many tutorials out there. I'd suggest you search for tutorials based upon what you are trying to accomplish.

Here is a brief explanation that may help you understand a little better. I am a self-taught programmer and as such I don't always use the "correct" terminology - which makes it easier to understand for the layman.

An object is a "thing" or "element" within your page. For example an imput field is an object. It has many properties, such as a name and a value.

Example 1:
<form name=list>
<input type=text name=name onBlur="validate();>
</form>

You could then have code in the javascript fuction "validate" which reference that object like this:

function validate() {
document.list.name.value = toUpperCase(document.list.name.value)
}

So when the field loses focus (blurs) the function will run and that line above will replace the field's value with the same text, but in all caps.

Now, let's say you had many fields that you wanted to do the same thing to. You don't want to have to write a bunch of different functions. You could use "this" to pass the object to the function. So, you would have the input field and the function like this:

<form name=list>
<input type=text name=name onBlur="validate(this);>
</form>

function validate(field) {
field.value = toUpperCase(field.value)
}

In this example, the onBlur trigger is sending "this" to the function. "this" is the same as "document.list.name". Now you could put the same trigger in multiple fields and use teh same function on all of them.

Hope this makes sense. This is just a small example of the things you can achieve. Good luck.

Michael J

So what happens if you call this in a function? Will it refer to the window? The document? Is the document even an object? I mean if at the beginning of my page I just have anObj = this. What is anObj?

What was annoying about my problem was that I clearly named my form. All my errors would go away if I referred to it as window.document.frames[0] but not when I referred to it by its name, window.document.aForm. Do you have any idea what would've caused a problem like that?

I don't think it would work "in a function". Well, at least not how you might think. Using "this" within a function *might* reference the function as an object. "this" will reference the object it was called in.

There would be no reason to use "this" to refer to the document or window since you can reference thos directly. I really don't know what you are trying to accomplish. Perhaps some sample code an an explanation would be helpful.

If you named your form, you should be able to refer to it by name. Must be a coding erro somewhere. BTW: you say that you can reference your form with window.document.frames[0] - is that a typo? Or are you talking about a frame and not a form?

Michael J

"So what happens if you call this in a function? Will it refer to the window?"

Yes, though that's a technical detail I've never tried.

"Is the document even an object?"

Yes, though notice it's a child of the window object.

"I mean if at the beginning of my page I just have anObj = this. What is anObj?"

A syntax error, probably. I don't know what you're trying to do there.

"All my errors would go away if I referred to it as window.document.frames[0] but not when I referred to it by its name, window.document.aForm."

(I'll assume you meant forms[0].) You named your form aForm. This is where we get into browser-specific terrain. You have names and id's. The differences are actually pretty obscure. The general rule is that names are not, nor required to be, unique. id's must and should always be unique. IE uses names and id's interchangably. Since this namespace covers a whole document, you have to be careful in naming.

What you should do is use an ID. I always use an id for everything important. Calling document.getElementById() always gets me the element I want. So when I want to reference an object I use:

document.getElementById('id_of_what_I_want')

This is really all about namespaces. Functions are stored directly in the global object. Methods are stored in an object, which itself is in the global object.

this refers to objects, not functions. In the DOM, everything is contained in something else. things like event handlers are owned by HTML objects, while functions are owned by the window object.

It's not a great idea to use this outside of an object (in functions) because it can be confusing. In the same way, global variables can be confusing.

Some more information at Quirksmode.

I think I have a grasp on what I'm doing wrong. Still a little fuzzy, I may need to buy a book or something. I think that since I made my functions essentially global, ie does not need an object to call it, that "this" really doesn't refer to anything. Ah it's all starting to make more sense.