Detailed explanation of the document Object

Source: Internet
Author: User

Document Object-JavaScript script language description
---------------------------------------------------------------------
Note: The element name attribute on the page and the name referenced by JavaScript must be case-sensitive.
Otherwise, you will be prompted with an error message "the referenced element is null or not an object"
---------------------------------------------------------------------

Object Attributes
Document. title // set the document title is equivalent to the <title> tag of HTML.
Document. bgColor // set the background color of the page
Document. fgColor // set the foreground color (text color)
Document. linkColor // The link color that has not been clicked
Document. alinkColor // the color of the activation Link (focus on this link)
Document. vlinkColor // the color of the clicked Link
Document. URL // set the URL attribute to open another webpage in the same window
Document. fileCreatedDate // file creation date, read-only attribute
Document. fileModifiedDate // file modification date, read-only attribute
Document. fileSize // file size, read-only attribute
Document. cookie // set and read cookies
Document. charset // set the character set to simplified Chinese: gb2312
---------------------------------------------------------------------
Object Method
Document. write () // dynamically write content to the page
Document. createElement (Tag) // create an html Tag object
Document. getElementById (ID) // get the object with the specified ID value
Document. getElementsByName (Name) // get the object with the specified Name value
---------------------------------------------------------------------

Images set (images in the page)

A) reference through a set
Document. images // The label on the corresponding page
Document. images. length // Number of labels on the corresponding page
Document. images [0] // 1st tags
Document. images [I] // The I-1 label

B) direct reference through the nane attribute

Document. images. oImage // document. images. name attribute

C) reference the image's src attribute
Document. images. oImage. src // document. images. name attribute. src

D) create an image
Var oImage
OImage = new Image ()
Document. images. oImage. src = "/1.jpg"
At the same time, you can create a tag on the page to display it.

<Html>

<Script language = "javascript">
Var oImage
OImage = new Image ()
Document. images. oImage. src = "/1.jpg"
</Script>
</Html>

----------------------------------------------------------------------

Forms set (forms in the page)

A) reference through a set
Document. forms // The <form> tag on the corresponding page
Document. forms. length // Number of <form> labels on the corresponding page
Document. forms [0] // 1st <form> tags
Document. forms [I] // The I-1 <form> label
Document. forms [I]. length // number of controls in the I-1 <form>
Document. forms [I]. elements [j] // The I-1 control in the J-1 <form>

B) direct reference through the label name attribute
<Form name = "Myform"> <input name = "myctrl"> </form>
Document. Myform. myctrl // document. form name. Control name

-----------------------------------------------------------------------
<Html>
<! -- Script related to the Text control -->
<Form name = "Myform">
<Input type = "text" name = "oText">
<Input type = "password" name = "oPswd">
<Form>
<Script language = "javascript">
// Obtain the value of the text password box
Document. write (document. Myform. oText. value)
Document. write (document. Myform. oPswd. value)
</Script>
</Html>
-----------------------------------------------------------------------
<Html>
<! -- Select control-related Script -->
<Form name = "Myform">
<Select name = "oSelect">
<Option value = "1"> 1 </option>
<Option value = "2"> 2 </option>
<Option value = "3"> 3 </option>
</Select>
</Form>

<Script language = "javascript">
// Traverse the option items of the select Control
Var length
Length = document. Myform. oSelect. length
For (I = 0; I <length; I ++)
Document. write (document. Myform. oSelect [I]. value)
</Script>

<Script language = "javascript">
// Traverse the option and determine whether an option is selected
For (I = 0; I <document. Myform. oSelect. length; I ++ ){
If (document. Myform. oSelect [I]. selected! = True)
Document. write (document. Myform. oSelect [I]. value)
Else
Document. write ("<font color = red>" + document. Myform. oSelect [I]. value + "</font> ")
}
</Script>

<Script language = "javascript">
// Print the selected option based on SelectedIndex
// (0 to document. Myform. oSelect. length-1)
I = document. Myform. oSelect. selectedIndex
Document. write (document. Myform. oSelect [I]. value)
</Script>

<Script language = "javascript">
// Dynamically Add the option item of the select Control
Var oOption = document. createElement ("OPTION ");
OOption. text = "4 ";
OOption. value = "4 ";
Document. Myform. oSelect. add (oOption );
</Script>
<Html>
-----------------------------------------------------------------------
<Div id = "oDiv"> Text </Div>
Document. all. oDiv // reference layer oDiv
Document. all. oDiv. style
Document. all. oDiv. style. display = "" // set the layer to visible.
Document. all. oDiv. style. display = "none" // The layers are hidden.
/* Document. all indicates the set of all objects in the document.
Only ie supports this attribute, so it is also used to determine the browser type */

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.