Browser object hierarchy and its main functions

The browser's internal object system enables interaction with HTML documents. It is used to organize and package related elements for program designers, so as to reduce the work of programmers and improve the ability to design web pages.

I. browser object hierarchy and its main functions

In addition to the document object mentioned above, the Navigator browser also provides window objects, historical and location objects.

● Browser object (Navigator) provides browser Information

Useful attributes in navigator include:
※Appname: Provide the browser name in string format.
※Appversion: indicates the version number of the browser.
※Appcodename: the name of the browser code.
※Useragent: User Agent ID.
※Minetypes: Available Mine type information.
※Plugins: available plug-ins.
※Ages: Language settings.
※Platform: the name of the platform applicable to the browser.
Example: your browser is Microsoft Internet Explorer 4.0 (compatible; MSIE 6.0; Windows NT 5.0)
<SCRIPT>
Document. Write ("your browser is:" + navigator. appname );
Document. Write ("version:" + navigator. appversion );
</SCRIPT>
● Window object (Windows)

The window object has the following methods:
※Open (URL, windowname, parameterlist): Creates a new window.
※Close (): close a window.
※Alert (text): Warning window.
※Confirm (text): the confirmation domain is displayed.
※Promt (text, defaulttext): a prompt box is displayed.
※Settimeout (expression, time) Timing settings.
※Cleartimeout (timer): cancels previous settings.
※Setinterval (expression, Time): sets a time interval.
※Clearinterval (timer): cancels the interval setting.
※Moveby (horizontal displacement and vertical displacement): Move the window to the specified displacement.
※Moveto (x, y): moves the window to the specified coordinate.
※Resizeby (horizontal and vertical): reset the window size based on the given displacement.
※Resizeto (x, y): Set the window size to the specified size.
※Scrollby (horizontal displacement and vertical displacement): Scroll the window according to the given displacement.
※Scrollto (x, y): Scroll the window to the specified position.
※Find (["string", true | false] [, true | false]): searches for strings in the webpage.
※Back (): return.
※Forward (): forward.
※Home (): return to the home page.
※Stop (): stops loading webpages.
※Print (): print the webpage.
※Frame: frame.
※Status: Status Bar information.
※Location: URL Information of the current window.
※History: history.
※Closed: indicates whether the window is closed.
※Parent indicates the parent window of the current window or frame.
※Defaultstatus: default status. Its value is displayed in the status bar of the window.
※Top: includes the window used to implement all lower-level windows.
※Window. indicates the current window.
※Self: reference the current window.

 

The basic format for opening a window:

Window. Open ("url", "window name", "window attribute"]

The window property parameter is a string list item separated by commas (,). It specifies the properties of the newly created window.

Parameter Value
Toolbar yes/no create or do not create Standard toolbar
Location yes/no create or do not create a location input field
Directions yes/no create or do not create a standard directory button
Status yes/no
Menubar yes/no create or do not create a menu bar
Scrollbar yes/no create or do not create a scroll bar
Revisable YES/NO can change the window size
Width yes/no determine the window width
Height yes/no determines the window height.

Note the following when using the open () method.

· A document is always opened in a browser window. Therefore, you do not need to create a new document for the output.

· After writing a web document, use or call the close () method to close the output stream.

· When open () is used to open a new stream, you can specify a valid document type for the document, valid document types include text/html, text/GIF, text/xim, and text/plugin.

The window object is at the top of the object hierarchy. It provides methods and properties for processing the Navigator window.
● Location object)
The location object provides methods and attributes to work with the currently opened URL. It is a static object.
The location object has the following methods:
Location = URL
Reload ()
Replace ()
● History Object)
The History Object provides information related to the history list.
You can use the history object to implement webpage Navigation:
1) Go: Let the browser load the specified URL.
History. Go (-2) can load the second to last URL accessed by the browser.
History. Go (0) can reload the current URL.
History. Go (http://www.tastelife.net)
2) Back: Let the browser load the previous URL of the History
3) Forward: Let the browser load the last URL of the historical record
● Document Object)
A document object contains objects that work with the document elements. It encapsulates these elements for programmers to use.
With these objects, programmers can control and process the events in the WWW browser environment. Javascript provides a wealth of internal methods and attributes, which reduces the work of programmers and improves programming efficiency. This is the fundamental difference between object-based and object-oriented. In these object systems, document objects are very important. They are located at the lowest layer, but play a key role in implementing web page information interaction. Therefore, it is the core part of the object system.

Ii. Functions and functions of document objects

In the Navigator browser, document objects are the core and most important. See Figure 6-1.

Links anchor form method prop
Link object, anchor object, form object, method object

As shown in Figure 6-1, the main function of the document object is to package these basic elements (such as links and anchor) for programming. From another perspective, the Document Object is composed of attributes and methods.

1. Three main objects in document

In the document, there are three most important objects: Links, anchor, and form:

(1) anchor object:

An anchor object refers to an object generated when <a name =...> </a> is included in the HTML source code. It contains all the anchors information in the document.

(2) link the links object

A link object is a URL that uses an element marked by <a href =...> </a> to connect to a hypertext or hypermedia.

(3) form object

A form object is an element of a document object. It contains Object Storage information in multiple formats. It can be used to write programs in JavaScript scripts for text input and dynamically change the document behavior. By using the document. Forms [] array, You can have multiple identical forms on the same page. Using the forms [] array is much easier than using the form name.
The document object has the following methods:

(1) write (), writeln () Output display.

This method is mainly used to display the output information on the Web page. In actual use, pay attention to the following points:

· The only difference between writeln () and write () Is that a token is added before the end.

· To properly display the output information, you must specify the <PRE> </PRE> flag to notify the editor.

· The type of the output document can be determined by the valid legal text type in the browser.

(2) Close the Document Stream close ()

In implementing multiple document objects, you must use close () to close one object before opening another document object.

(3) Clear the document content clear ()

For example, the following is an example of using the form array and form name. This program makes the fields in the two forms consistent.

Test6_1.htm

<HTML>
<Head>
</Head>
<Body>
<Form>
<Input type = text onchange = "document. My. elements [0]. value = This. value;">
</Form>
<Form name = "my">
<Input type = text onchange = "document. Forms [0]. elements [0]. value = This. value;">
</Form>
</Body>
</Html>

The onchnge event is used (triggered when the content of the form changes ). The first uses the form name to identify my, and the second uses the form array forms []. The results are consistent.

2. Attribute attribute in the Document Object

The attribute in the document object is used to control the color format and the document title, the URL of the original file of the document, and the last update date of the document when the href identifier is referenced. The main meanings of these elements are as follows:

(1) link color: alinkcolor

This element is mainly used. When a link is selected, the color of the link object changes according to alinkcolo R.

(2) link color: linkcolor

After you use the <a href =...> text string </a> link, the color of textstring is updated according to the color specified by linkcolor.

(3) color after browsing: vlinkcolor

This attribute indicates the color of the link that has been browsed and stored as browsed.

(4) Background Color: bgcolor

This element contains the document background color.

(5) foreground color: fgcolor

This element contains the foreground color of the text in the HTML document.

3. Basic Elements of document objects

(1) form attributes:

The form attribute is the number of forms created by the HTML document for a set of objects in the HTML document corresponding to <form>... </form>, specified by length. Document. Forms. length is used to reflect the number of forms created in this document.

(2) anchors

This attribute contains all the statement identifiers marked as name =... in the HTML document <A> </a>. The number of all "Anchors" is stored in document. Anchors. length.

(3) link property: Links

The link property refers to the number of links specified by href =... in <A>... </a> in the document, which is saved in document. Links. length.

Iii. Examples

Example 1: The following example shows the comprehensive application of the Document Object.

Test6_2.htm

<HTML>
<Head>
</Head>
<Body>
<Form name = "mytable">

Enter data:

<Input type = "text" name = "text1" value = "">
</Form>
<A name = "link1" href = "test31.htm"> link to the first text </a> <br>
<A name = "link2" href = "test32.htm"> link to the second text </a> <br>
<A name = "link2" href = "test33.htm"> link to the third text </a> <br>
<A href = "# link1"> first anchor </a>
<A href = "# link2"> second anchor </a>
<A href = "# link3"> third anchor </a>
<Br>
<Script language = "JavaScript">
Document. Write ("the document has" + document. Links. Length + "Links" + "<br> ");
Document. Write ("the document has" + document. Anchors. Length + "anchor" + "<br> ");
Document. Write ("the document has" + document. Forms. Length + "forms ");
</SCRIPT>
</Body>
</Html>

Example 2: The following procedure randomly generates a daily expression.

Test6_3.html

<HTML>
<Head>
<Script language = "JavaScript">
<! --
Tips = new array (6 );
Tips [0] = "one phrase per day (1 )";
Tips [1] = "daily expression (2 )";
Tips [2] = "daily expression (3 )";
Tips [3] = "daily expression (4 )";
Tips [4] = "daily expression (5 )";
Tips [5] = "one phrase per day (6 )";
Index = math. Floor (math. Random () * tips. Length );
Document. Write ("<font size = 8 color = darkblue>" + tips [Index] + "</font> ");
</SCRIPT>
</Head>
</Body>