Home > Developer > JavaScript
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)
Provide information about browsers
Window object (Windows)
The window object is at the top of the object hierarchy. It provides methods and properties for processing the Navigator window.
Location)
The location object provides methods and attributes to work with the currently opened URL. It is a static object.
Historical object (History)
The History Object provides information related to the history list.
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 |
Figure 6-1 Document 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.
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. The output result is shown in Figure 6-2.
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>
Figure 6-2
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>
</Html>
The output result is shown in Figure 6-3.
Figure 6-3
This section describes how to use the JavaScript Object System. It focuses on document objects and usage.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
