Wow said:
It is clearly stated that link is an object under document. Read this gif
file
http://www.comptechdoc.org/independent/web/cgi/javamanual/objheirarchy.gif
In most user agents, the name of the form is made a property of the document
object, the names of anchor tags are not (although in IE, the names and ids of
pretty much everything are made members of the global (window in most Web
browsers) object. This leads to the sort of confusion you are having.
The best way to reference objects is by their fully qualified path in the DOM
hierarchy:
document.forms['formName'].elements['elementName']
To access links on the page, you have a variety of options, the most
cross-browser compatible method is to use the links collection of the document
object:
document.links[indexOfLinkOnPage] or document.links[nameOrIdOfLink] (note that
using the name/id may not work in all browsers)
As for a discussion of self, this and document. Your question seems to
indicate a fundamental lack of understanding. In simple terms:
"document" refers to the default HTMLDocument object created by the user agent
when a page is rendered, typically document is a property of the global
(window) object
"self" is also a property of the global (window) object, one which points back
at the window object such that (window.self === window) should be true (it
isn't in Internet Explorer, but it is in Gecko-based browsers, Netscape 4.78
and Opera 7.53). I'm unsure why people use "self". It requires JavaScript to
step through the object in the DOM you actually want to retrieve a property
which points back at the object you wanted in the first place. I guess it's
useful for self-documenting code (pun not intended). I don't know, I never use
it, when I want the default window object, I use "window".
"this" always refers to the current object. Outside of any function, "this"
would refer to the global (window) object such that (this === window) returns
true. Within functions, "this" can refer to a number of things, but it is
always the "current object". Example:
<body onload="document.links[0].onclick = onclickHandler;">
<script type="text/javascript">
function onclickHandler() {
alert(
"'this' is 'window': " +
(this === window) +
"\n" +
"'this' is 'document.links[0]': " +
(this === document.links[0])
);
return false;
}
</script>
<a href="#">'this' will refer to 'document.links[0]'</a><br />
<a href="#" onclick="return onclickHandler();">'this' will refer to
'window'</a>
</body>
Same event handler code, same event (onclick) attached on the same type of
element, but "this" refers to a different thing for each link. If you wanted a
reference to the link that triggered the event for the second link, you'd
need:
<a href="#" onclick="return clickHandler(this);">
As for that image, it's old, outdated and actually just wrong. "window" is not
a property of "navigator". If it were, (navigator.window === window) would be
true. It's not. In fact, navigator.window is undefined in every user agent I
tested. You _might_ be able to say that diagram is a representation of the DOM
hierarchy (which is different from a JavaScript object heirarchy) in Netscape
4, but I wouldn't even go that far. You'd be best served by simply removing
any bookmarks you have to that page.
