Document, Link, Image, Anchor objects in HTML
By: aathishankaran in HTML5 Tutorials on 2007-03-29
The window object is the highest-level object for built-in JavaScript objects; in this role, it serves as a container, but it does not have any content that is associated with it, per se. It leaves the content of a Web document up to the document object. The document object serves as the JavaScript equivalent of an HTML document. In this role, the document object is a container for all HTML related objects that are associated with both the <HEAD> and <BODY> tags. The document object gets its title property from the <TITLE> tag (located within the <HEAD> section) and several color-related properties from the <BODY> section, which is shown here:
Syntax
<BODY [BACKGROUND="backgroundImage"][BGCOLOR="backgroundColor"]
[TEXT="foregroundColor"] [LINK="unfollowedLinkColor"]
[ALINK="activatedLinkColor"] [VLINK="followedLinkColor"]
[onLoad="methodName"] [onUnload="methodName"]>
</BODY>
Although onLoad and onUnload events are associated with the <BODY>tag, they are events of the window object, not the document object. The document object is critical as you' work with JavaScript and HTML because all the action happens on a Web page within a document. Because of this scope, you need to refer to the document object when you are accessing an object within it. For example, if you want to access a form object named invoiceForm, you must preface your reference with document:
document.invoiceForm.submit()
If you do not, JavaScript is unable to locate the object within the page.
Changing Document Attribute Colors
Color settings for documents are usually set by a user in his browser configuration, but JavaScript gives you the ability to change these color settings programmatically. The document object has five properties that reflect the colors of various attributes within the document alinkColor, bgColor, fgColor, linkColor, and vlinkColor
| Property | Description | HTML Tag |
|
alinkColor |
Color of an activated link(after mouse down, before mouse up) |
ALINK= |
|
bgColor |
Background color of document |
BGCOLOR= |
|
fgColor |
Foreground color of document |
TEXT= |
|
IinkColor |
Color of unvisited links |
UNK= |
|
vlinkColor |
Color of visited links |
VUNK= |
These properties are expressed either as string literals or as hexadecimal RGB triplet values. For example, if you wanted to assign a background color of chartreuse to a document, you could use the string literal chartreuse:
document.bgColor = chartreuse
You could also use the equivalent hexadecimal RGB triplet value:
document.bgColor = "7fffOO"
Link Object
HTML links are the core elements of any Web document, enabling you to jump to another Web page with the click of a mouse. The location of the document is immaterial; it could be on the same Web server or thousands of miles away. All that matters is that the URL is valid. The link object is the JavaScript equivalent of the hypertext link, which is defined in HTML syntax as
<A HREF=locationOrURL [NAME="objectName"] [TARGET="windowName"]
[onClick="'methodName"][onMouseOver="methoQName"]> linkText </A>
The link object has several properties that are the same as the parameters for the location object. These include hash, host, hostname, href, pathname, port, protocol, and search.
Anchor Object
You most often use a link object to jump to another Web page or another location within the current document. Within the current document, the link locates a specific place in the text called an anchor, which is defined in HTML syntax as
<A [HREF=locationOrURL] NAME="objectName" [TARGET="windowName"]>anchorText </ A>
To be politically correct, you could say that the anchor object is "JavaScript challenged" be-cause you can do little in JavaScript with anchors. By itself, an anchor object has no properties, methods, or events. The only way you can really use them in JavaScript is through the anchors array of the document object. You can use the anchors array to determine the number of anchors in a document and iterate through them as desired.
Image Object
The image object is new to Netscape Navigator 3.0. If you spend any time at all on the Web, you quickly realize how important graphics are to the Web. You can hardly go to a page without seeing several graphics scattered throughout. New to Netscape Navigator 3.0, the image object represents an HTML image, which is defined in the following format:
<IMG [NAME="objectName"]' SRC="Location" [LOWSRC="Location"]
[HEIGHT="Pixels"|"Value"%] [WIDTH="Pixels"|"Value"%]
[HSPACE="Pixels"] [VSPACE="Pixels"] [BORDER="Pixels"]
[ALIGN="left"|"right"| "top"|"absmiddle"|"absbottom"|"texttop"|"middle"|"baseline"|"bottom"][ISMAP] [USEMAP="Location#MapName"] [onAbort="methodName"][onError="methodName"] [onLoad="methodName"]>
Add Comment
This policy contains information about your privacy. By posting, you are declaring that you understand this policy:
- Your name, rating, website address, town, country, state and comment will be publicly displayed if entered.
- Aside from the data entered into these form fields, other stored data about your comment will include:
- Your IP address (not displayed)
- The time/date of your submission (displayed)
- Your email address will not be shared. It is collected for only two reasons:
- Administrative purposes, should a need to contact you arise.
- To inform you of new comments, should you subscribe to receive notifications.
- A cookie may be set on your computer. This is used to remember your inputs. It will expire by itself.
This policy is subject to change at any time and without notice.
These terms and conditions contain rules about posting comments. By submitting a comment, you are declaring that you agree with these rules:
- Although the administrator will attempt to moderate comments, it is impossible for every comment to have been moderated at any given time.
- You acknowledge that all comments express the views and opinions of the original author and not those of the administrator.
- You agree not to post any material which is knowingly false, obscene, hateful, threatening, harassing or invasive of a person's privacy.
- The administrator has the right to edit, move or remove any comment for any reason and without notice.
Failure to comply with these rules may result in being banned from submitting further comments.
These terms and conditions are subject to change at any time and without notice.
|
Most Viewed Articles (in HTML5 ) |
Latest Articles (in HTML5) |
Comments