JavaScript reference tutorial document object
Now we will start discussing more "actual" topics - document objects (DOM). Document object refers to an object that is divided in the web document. There is a few "big" objects in JavaScript: Window, Document, Location, Navigator, Screen, History, etc. Below is a document object tree, you can see the "spectacular" scenario containing the object under the object. To reference an object, you have to list the parent's objects. For example, to reference a text box "CustomerName" of a form "ApplicationForm", you must use "Document.Applicationform.customername".
Some objects in the table below are all written, and some are beginning to uppercase letters. Subjects at uppercase letters, reference to this object does not use the name listed in the table, and directly use the "name" of the object (ID or Name, which is explained below), or specify the object array of object it belong.
Here we are not prepared to explain the "event" of the object, although we will also list the events that can respond to the object. We will explain the event in the next chapter "Event Process".
Navigator
Screen
Window
History
Location
Frames []; FRAME
Document
ANCHORS []; links []; link
Applets []
Embeds []
Forms []; FORM
Button
Checkbox
Elements []; Element
Hidden
Password
Radio
RESET
SELECT
Options []; option
Submit
TEXT
Textarea
Images []; Image
Browser object
Screen object
Window object
Historical object
Address object
Frame object
Document object
Connection object
Java small program object
Plugin object
Form object
Button object
Check box object
Form element object
Hidden object
Password input area object
Single-selection domain object
Reset button object
Select zone (drop-down menu, list) object
Select item object
Submit button object
Text box object
Multi-line text input area object
Picture object
The Navigator browser object reflects the information of the currently used browser.
Attributes
AppCodename Returns the "Code" (?) of the browser (?), popular IE and NN return 'Mozilla'.
AppName returns the browser name. IE returns 'Microsoft Internet Explorer', NN returns 'Netscape'.
AppVersion returns the browser version, including the large version number, small version number, language, operational platform and other information.
Platform returns the action platform of the browser, returns 'Win32' on the browser on Windows 9x (case of case where cases may be different).
UseERAGENT returns all the above information. For example, IE 5.01 returns 'mozilla / 4.0 (compatible; msie 5.01; windows 98)'.
JavaEnabled () returns a Boolean value that represents the current browser allows Java to be allowed.
The Screen screen object reflects the current user's screen settings.
Attributes
Width returns the width of the screen (the number of pixels).
Height returns the height of the screen.
AvailWidth returns the available width of the screen (removed some of the widths occupied by something that do not automatically hide the similar taskbar).
AvailHeight Returns the available height of the screen.
ColorDepth Returns the number of bits used in the current color settings - 1: black and white; 8: 256 colors; 16: Enhance color; 24/32: True color Window window object's largest object, it describes a browser window. When it is generally referenced to its properties and methods, it is not necessary to use "Window.xxx" in the form of "XXX" directly. A framework page is also a window.
Attributes
The name of the Name window, the open () or frame page (
Opener usage: window.opener; Returns the window object to open this window. Note: Returns a window object. If the window is not opened by another window, this attribute returns null in NetScape; returns "undefined) in IE. Undefined is equal to NULL to some extent. Note: undefined is not a JavaScript constant, if you try to use "undefined", it really returns "undefined". The SELF fingers, the object it returns is exactly the same as the Window object. The most commonly used "Self.close ()", in the tag: " Close window a>". Parent Returns the frame page object to which the window belongs. TOP returns the top of the entire browser window to the top page object. History historical object, see below. Location address object, see below. Document document object, see below. method Open () opens a window. Usage: Open ( Example: Open a clean window of 400 x 100: Open ('', '_ blank', 'width = 400, height = 100, menubar = no, toolbar = no, location = no, directories = no, status = no, scrollbars = yes, resizable = yes') parameter Top = # Top of the top of the window leaves the number of pixels at the top of the screen LEFT = # window left left side of the pixel number of pixels on the left Width = # width of the window Height = # Height of the window Menubar = ... There is no menu, value yes or no Toolbar = ... There is no tool bar, value yes or no Location = ... There is no address bar without address, value yes or no Directories = ... There is no connection area in the window, value Yes or NO Scrollbars = ... There is no scroll bar with a window, value yes or no STATUS = ... There is no status bar in the window, values YES or NO Resizable = ... window does not adjust the size, value yes or no The OPEN () method has a return value, returning is the window object it open. and so, Var newWindow = Open ('', '_ blank'); This assigns a new window to the "NewWindow" variable, and then control the window through the "newWindow" variable. Close () Close an open window. Usage: window.close () or self.close (): Close this window; If the window has a status bar, the browser will warn: "The page is trying to close the window, is it close?" Then wait for the user to choose whether it is; if there is no status bar, call the method to close the window directly. Blur () makes the focus from the window, and the window becomes "non-active window". FOCUS () is a window to get focus and become a "active window". However, in Windows 98, this method can only flash the title bar of the window and the corresponding button on the taskbar, prompting the user that the window is trying to get the focus. ScrollTo () Usage: [ Scrollby () usage: [ ResizTo () Usage: [ Resizeby () Usage: [ Alert () Usage: Alert ( Prompt () usage: prompt ( event OnLoad; OnResize; Onfocus; OneRror History historical object history object refers to the browser browsing history. In view of the safety needs, the object receives a lot of restrictions, and now only the following properties and methods remain. Attributes Length history of history. History that JavaScript can manage is limited to the range of "advancement" "back" keys in the browser. This attribute returns the sum of the number of addresses included under "advancement" and "back" two buttons. method Back () back, follow the "Back" button is equivalent. Forward () advance, follow the "advance" button is equivalent. Go () usage: History.go (x); go to the specified address within the scope of history. If x <0, return X address, if x> 0, then forward X addresses, if x == 0, refresh the top now open. History.go (0) is equivalent to location.Reload (). Location Address Objects It describes the address opened by a window object. To indicate the address of the current window, just use "location" to do it; if you want to indicate the address of a window, use " Note that the two addresses belonging to different protocols or different hosts cannot be referenced to each other's Location objects, which is for security needs. For example, the current window opens "www.a.com", another window (object name: bwindow) opens "www.b.com" webpage. If you use "bwindow.location" in the current window, it will be wrong: "No Permissions". This error is to receive processing with the error handler (Event Handler, see the OneRror event). Attributes Protocol Returns the protocol of the address, with the value of 'http:', 'https:', 'file:', and so on. Hostname returns the host name of the address, for example, an address of "http://www.microsoft.com/china/", location.hostname == 'www.microsoft.com'. Port number of port returns the address, the general HTTP port number is '80'. Host returns host name and port number, such as: 'www.a.com: 8080'. Pathname Returns the path name, such as "http://www.a.com/b/c.html" ,location.pathname == 'b / c.html'. Hash returns "#" and later, such as "http://www.a.com/b/c.html#chapter4" ,location.hash == '# chapter4'; if there is no" # "in the address, Return to the empty string. Search returns "?" and later content, such as "http://www.a.com/b/c.asp?selection=3&jumpto=4" ,location.search == '? Selection = 3 & jumpto = 4'; if If there is no "?" In the address, it returns an empty string. HREF returns all the above content, that is, returns the entire address. How to display it on the address bar of the browser to return. If you want a window object to open an address, you can use "location.href = '...'", you can also use "location = '...'" to achieve this purpose. method Reload () is equivalent to "Refresh" or "Netscape" button on your browser. Replace () opens a URL and replaces the address of the current location in the historical object. After opening a URL with this method, press the "Back" button of the browser will not return to the page you just. Frames []; Frame Framework See "Use Framework and Cookies" chapter. Document Document Object Describes the documentation of the current window or specifying a window object. It contains the content from
Usage: Document (current window)
Or
Attributes
Cookie For cookies, please refer to Chapter of "Use Framework and Cookies".
LastModified Current Date of Documentation is a Date object.
Referrer If the current document is opened by clicking on the connection, ReferR returns the original URL.
Title refers to the text of
FGColor refers to the text color represented by the Text property of the
BGColor refers to the background color represented by the BGColor property of the
tag.LinkColor refers to the connection color represented by the LINK property of the
tag.AlinkColor refers to the active connection color indicated by the ALINK attribute of the
tag.VLINKCOLOR refers to the accessed connection colors indicated by the VLINK attribute of the
tag.method
Open () opens a document so that JavaScript writes data to the current location of the document (refers to the location of JavaScript). Usually do not need this method, JavaScript is automatically called when needed. Write (); Writeln () writes data to the document, and the writes are handled as a standard document HTML. The difference between Writeln () and Write () is that Writeln () will add a wrap after writing data. This wrap is only in HTML, and the specific situation can be unable to be displayed, and the location of the JavaScript is inserted. If inserted into the
mark, this wrap will also be embodied in the document.Clear () Clears the current document.
Close () Close the document and stop writing data. If the Write [Ln] () or CLEAR () method is used, you must use a close () method to ensure that the changes made can be displayed. If the document has not fully read, that is, JavaScript is inserted in the document, so it is not necessary to use this method.
Now we have enough knowledge to do the following, some of the pop-up updates are notified.
Var whatsnew = open ('', '_ blank ",' top = 50, left = 50, width = 200, Height = 300, '
'menubar = no, toolbar = no, directories = no, location = no,'
'status = no, resizable = no, scrollbars = yes');
Whatsnew.Document.write ('
update notification b> center>'); Whatsnew.Document.write ('
last update date: 00.08.01');
Whatsnew.Document.write ('
00.08.01: Added "My Favorite" section.');
Whatsnew.Document.write ('
' tag, this object is given a flag (ID), only"
"is required when calling this object. Ok. Many document components can use this method to give an ID, but be careful not to have two IDs. Anchors and Links are arrays, with an array of properties and methods. A single anchor object is not attribute; the properties of a single Link object are asked.
Attributes
Protocol; host; pathname; haveh; search; href is the same as the location object.
TARGET returns / specifies the target window (string), which is the same as the target attribute in the tag.
event
Onclick; onmouseover; onmouseout; onmouseup
Applets [] Java small program object is an array that contains the Applet object (Java applet) in the document. As an array, there is an array of properties and methods. With regard to the properties and methods of a single applet object, I reference a sentence: "Applet object inherits all public properties and methods of the Java applet." (English original: The applet object inherits all public property of the java applet./the applet Object Inherits All Public Methodss of The Java Applet.) Because I am very disgusted Java applet, I am not interested in what "public" "private" problem is not interested.
Embeds [] Plugin Object It is an array that contains all plugins in the document (
Forms []; Form form object Document.Forms [] is an array that contains all forms in the document (
.Elements is an array that contains all objects of the form. Generally, we don't have to use the array, and the specific objects are directly referenced. Hidden hidden object is specified by "".
Attributes
Name Return / Set the element name specified with .
Value Returns / Sets the value of the element specified with .
Form returns a form object that contains this element.
The Password Password Enter the area is specified by "".
Attributes
Name Return / Set the element name specified with .
Value Returns / Set the current value of the password input area.
DEFAULTVALUE Returns the default value specified with .
Form returns a form object that contains this element.
method
Blur () removes the focus from the object.
FOCUS () allows objects to get focus.
SELECT () Select all text in the password input area.
event
ONCHANGE
The RADIO single-selection domain object is specified by "". A set of Radio objects have a common name (name attribute), in which document.formname.radioname has an array. To access a single RADIO object: Document.formname.radioname [x]. Properties of a single Radio object
Name Return / Set the element name specified with .
Value Returns / Sets the value of the element specified with .
Form returns a form object that contains this element.
Checked returns / set whether the single-selection domain object is selected. This is a Boolean value.
DefaultChecked Returns / Set whether the object is selected by default. This is a Boolean value.
method
Blur () removes the focus from the object.
FOCUS () allows objects to get focus.
Click () simulates the mouse click on the object.
event
Onclick
The RESET reset button object is specified by "". Because RESET is also a button, there is also the properties and methods of the Button object. As for the "OnClick" event, it is generally replaced with the ONRESET of the Form object.
SELECT Selection Area (drop-down menu, list) object is specified by "
Attributes
Name Return / Set the element name specified with .
Length returns the number of options under the SELECT object.
SelectedIndex returns the subscript of the selected option. This subscript is the location of this option in an Options [] array. If the SELECT object allows multiple selections, returns the subscript of the first selected option.
Form returns a form object that contains this element.
method
Blur () removes the focus from the object.
FOCUS () allows objects to get focus.
event
ONCHANGE
Options []; Option Select Object Options [] is an array containing an Option object under the same Select object. The Option object is specified by "
" under " Options [] Array properties
Length; SELECTEDIndex is the same as the same name properties of the SELECT object.
Properties of a single Option object
Text Back / Specifies the text displayed by the Option object
VALUE Returns / Specifies the value of the Option object, consistent with
INDEX returns the subscript of the Option object. There is nothing to say about this, because you want to specify a specific OPTION object, you must first know the subscript of the object. This property does not seem to use.
SELECTE Returns / Specifies whether the object is selected. You can dynamically change the selected item by specifying True or FALSE.
DEFAULTSELECTED Returns whether the object is selected by default. TRUE / FALSE.
Submit Submit button object is specified by "
TEXT text box object is specified by "". The Password object is also one of the Text object, so all attributes, methods, and events of Password objects are available. TextArea Multi-line text input area object is specified by "
Images []; Image Image Object Document.Images [] is an array that contains all images in the document (
). To reference a single picture, you can use document.images [x]. If a picture contains the "name" attribute, it is to define a picture in this format of "
", you can use "Document.Images ['...']" Method to reference pictures. In IE, if a picture contains ID attributes, it is to define a picture in this format using "
", you can use "
" directly to reference the image. Properties of a single image object
Name; Src; LowSrc; width; height; vSpace; hspace; border; these properties are the same as the same name attribute in the
tag. In Netscape, other properties (almost all) cannot be changed, even if it is changed, the effect can not be displayed in the document. These properties are most useful to SRC, and can change the image in real time by assigning a value to the SRC property.
event
Onclick
Image object not displayed in the document
The image object not displayed in the document is defined using a VAR statement:
Var MyImage = new image (); or
Var myimage = new image (
); The MyImage variable can then be treated like a typical image object. But since it is not displayed in the document, the following properties: LowSRC, Width, Height, vSpace, Hspace, Border is not used. Generally, this object is only one: pre-read picture (preload). Because when assigning the SRC attribute of the object, the reading of the entire document, the operation of JavaScript is paused, allowing the browser to read pictures. After reading the picture, there is a picture of the picture in the browser's cache. When you try to put the picture in the document, you can display it immediately. There will often be some image connections in the current web page. When the mouse pointing to it, the image replaces another image, which is pre-read image.
JavaScript example of pre-reading image
Var imagepreload = new image ();
ImagePreLoad.src = '001.gif';
ImagePreLoad.src = '002.gif';
ImagePreLoad.src = '003.gif';
The above example is suitable for reading a small number of pictures.
Function imagePreLoad () {
Var imgpreeload = new image ();
For (i = 0; i
IMGPRELOAD.SRC = arguments [i];
}
ImagePreLoad ('001.GIF', '002.GIF', '003.GIF', '004.GIF', '005.gif');
The above example is suitable for reading a large number of pictures.