The javascript| tutorial uses the browser's internal object system to enable interaction with HTML documents. Its role is to package the relevant elements, provided to the program designers to use, thereby reducing the labor of programmers, improve the ability to design Web pages.
I. Browser object hierarchy and its main role
The Navigator browser also provides window objects as well as historical (History) and location (Location) objects, in addition to the documents document objects mentioned earlier.
Browser object (Navigator)
Provide information about your browser
Window objects (Windows)
The Window object is at the top of the object hierarchy, which provides methods and properties for handling Navigator windows.
Location Object (Location)
The Location object provides methods and properties that work with the currently open URL, which is a static object.
Historical Objects (History)
The History object provides information about the history list.
Documents object (document)
The Document object contains objects that work with the documentation element (elements), which encapsulates these elements for use by programmers.
Programmers can use these objects to control and handle events in the WWW browser environment. Provides a wealth of internal methods and properties in JavaScript, which eases the programmer's work and improves programming efficiency. This is precisely the fundamental difference between objects and object-oriented objects. In these object systems, the document object is very important, it is at the lowest level, but it plays a key role in our implementation of Web page information interaction. Thus it is the core part of the object system.
Second, Document object function and its function
In the Navigator browser, the document documentation object is the core and the most important. See table 6-1 for the following.
| Links |
Anchor |
Form |
Method |
Prop |
| Linked objects |
Anchor Object |
Form objects |
Method |
Object |
Table 6-1 Document Object
As can be seen from table 6-1, the main function of the document object is to package these basic elements (such as links,anchor, etc.) for use by programmers. From another perspective, the document object is made up of attributes and methods.
1. Three main objects in document
There are three most important objects in the document: Links,anchor,form and so on:
(1) Anchor anchored object:
The Anchor object refers to an object that is produced when the <a name=...> </A> identity exists in the HTML source code. It contains all the anchors information in the document.
(2) Link links object
A link object refers to a hypertext or hypermedia-connected element with a <a href=...> </A> tag as a specific URL.
(3) Form Object
A Form object is an element of a document object that contains a variety of formatting object storage information that you can use to write programs in JavaScript scripts for text entry and to dynamically alter the behavior of the document. Through document. Forms[] Array to make multiple identical forms available on the same page, using a forms[array is much more convenient than using a form name.
Example: The following is an example of using form arrays and form names. This program keeps the contents of the fields in the two forms consistent.
Test6_1.htm
<Html>
<body>
<form >
<input Type=text >
</form>
<form name= "my" >
<input Type=text >
</form>
</body>
|
The Onchnge event is used (fires when the form content changes). The first one uses the form name to identify my, and the second uses the form array forms[]. The effect is consistent.
2, attribute attributes in the Document object
Attribute attributes in the Document object, used primarily to control the format of the color and the URL of the document's original file and the date the document was last updated when referencing the href identity. The main meanings of this part of the element are as follows:
(1) Link color: alinkcolor
This element is primarily used when a link is selected, and the color of the linked object itself is specified by Alinkcolo R.
(2) Link color: LinkColor
When the user uses the <a href=...> Text string </A> link, the textstring color is updated with the color specified by LinkColor.
(3) After browsing the color: vlinkcolor
This property represents a link color that has been browsed and stored as viewed.
(4) Background color: bgcolor
This element contains the color of the document background.
(5) Foreground color: fgcolor
This element contains the foreground color of the text in the HTML document.
3, the basic elements of the Document object
(1) Form properties:
Form properties are the number of forms created in an HTML document for a set of objects corresponding to <Form>...</Form> in an HTML document, specified by length. The number of forms created in the document is reflected by Document.forms.length.
(2) Anchor attribute: anchors
This property contains all the <A> </A> tags for the HTML document as Name= ... Statement identification. The number of all "anchors" is kept in document.anchors.length.
(3) Link Properties: Links
Link properties refers to the <A>...</A> in the document by href= ... The number of links that are specified, and their number is saved in Document.links.length.
Iii. Examples
Example 1: Here is an example to illustrate the comprehensive application of a Document object. The output results are shown in Figure 6-2.
Test6_2.htm
</HEAD>
<BOdy>
<form name= "MyTable" >
Please enter the data:
<input type= "text" name= "Text1" "value=" ">
</Form>
<a name= "Link1" href= "test31.htm" > link to first text </a><br>
<a name= "Link2" href= "test32.htm" > Link to second text </a><br>
<a name= "Link2" href= "test33.htm" > link to third text </a><br>
<a href= "#Link1" > the first anchor point </a>
<a href= "#Link2" > second anchor point </a>
<a href= "#Link3" > Third anchor Point </a>
<BR>
<script language= "JavaScript" >
document.write ("Document has" +document.links.length+ "link" + "<br>");
document.write ("Document has" +document.anchors.length+ "anchor point" + "<br>");
document.write ("Document has" +document.forms.length+ "form");
</script>
</body>
</HTML>
|
Figure 6-2
Example 2: The following procedure randomly produces the daily language.
Test6_3.html
<HTML>
<HEAD>
<script language= "JavaScript" >
<!--
Tips = new Array (6);
Tips[0]= "Daily (1)";
Tips[1]= "Daily (2)";
Tips[2]= "Daily (3)";
Tips[3]= "Daily (4)";
Tips[4]= "Daily (5)";
Tips[5]= "Daily (6)";
index = Math.floor (Math.random () * tips.length);
document.write ("<font size=8 color=darkblue>" + tips[index]+ "</FONT>");
</Script>
</HEAD>
</BODY>
</HTML>
|
The output results are shown in Figure 6-3.
Figure 6-3
This talk mainly introduces the use of JavaScript object system, which focuses on the document object and use.
