The JavaScript object system used

Source: Internet
Author: User
Tags documentation

Using the browser's internal object system enables you to interact 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 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>

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.