Home > Developer > JavaScript
Object Property:
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
----------------------------
Common Object methods:
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
Document. Body. appendchild (otag)
========================================================== ======================================
Body-subject sub-Object
Document. Body // specify the beginning and end of the document body, which is equivalent to <body> </body>
Document. Body. bgcolor // set or obtain the background color behind the object
Document. Body. Link // the color of the link that has not been clicked
Document. Body. alink // the color of the activation Link (focus on this link)
Document. Body. vlink // the color of the clicked Link
Document. Body. Text // text color
Document. Body. innertext // set the text between <body>... </body>
Document. Body. innerhtml // set HTML between <body>... </body> Code
Document. Body. topmargin // top margin of the page
Document. Body. leftmargin // left margin of the page
Document. Body. rightmargin // right margin of the page
Document. Body. bottommargin // bottom margin of the page
Document. Body. Background // background image
Document. Body. appendchild (otag) // dynamically generate an HTML Object
----------------------------
Common Object events:
document. body. onclick = "func ()" // The mouse pointer to the clicked object is triggered
document. body. onmouseover = "func ()" // triggered when the mouse pointer is moved to an object
document. body. onmouseout = "func () "// triggered when the mouse pointer is removed from an object
================================ ========================================================== ===< br> location-location sub-object:
Part after document. Location. Hash // #
Document. Location. host // domain name + port number
Document. Location. hostname // Domain Name
Document. Location. href // complete URL
Document. Location. pathname // directory
Document. Location. Port // port number
Document. Location. Protocol // network protocol (HTTP :)
Document. Location. Search //? Part after
----------------------------
Common Object events:
Using eny. Location. Reload () // refresh the webpage
Document. Location. Reload (URL) // open a new webpage
Document. Location. Assign (URL) // open a new webpage
Document. Location. Replace (URL) // open a new webpage
========================================================== ======================================
Selection-Selection Sub-Object
Document. Selection
========================================================== ======================================
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 name 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.
----------------------------
Sample Code (dynamic image creation ):
<HTML>
<Script language = "JavaScript">
VaR oimage
Oimage = new image ()
Document. Images. oimage. src = "1.jpg"
</SCRIPT>
</Html>
<HTML>
<Script language = "JavaScript">
Oimage = Document. caeateelement ("IMG ")
Oimage. src = "1.jpg"
Document. Body. appendchild (oimage)
</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
----------------------------
C) Access Form attributes
Document. Forms [I]. Name // corresponds to the <form name> attribute
Document. Forms [I]. Action // corresponds to the <form action> attribute
Document. Forms [I]. Encoding // corresponds to the <form enctype> attribute
Document.formspolici2.16.tar get // corresponding to the <form target> attribute
Document. Forms [I]. appendchild (otag) // dynamically insert a control
----------------------------
Sample Code (form ):
<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>
----------------------------
Sample Code (checkbox ):
<HTML>
<! -- Checkbox, radio control related script -->
<Form name = "myform">
<Input type = "checkbox" name = "Chk" value = "1"> 1
<Input type = "checkbox" name = "Chk" value = "2"> 2
</Form>
<Script language = "JavaScript">
Function fun (){
// Traverse the value of the checkbox control and determine whether to select
VaR Length
Length = Document. Forms [0]. Chk. Length
For (I = 0; I <length; I ++ ){
V = Document. Forms [0]. Chk [I]. Value
B = Document. Forms [0]. Chk [I]. Checked
If (B)
Alert (V = V + "selected ")
Else
Alert (V = V + "unselected ")
}
}
</SCRIPT>
<A href = # onclick = "Fun ()"> DDD </a>
</Html>
----------------------------
Sample Code (select ):
<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">
// 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 set (layer in the page ):
<Div id = "odiv"> text </div>
Document. All. odiv // reference layer odiv
Document. All. odiv. style. Display = "" // set the layer to visible.
Document. All. odiv. style. Display = "NONE" // The layers are hidden.
Document. getelementid ("odiv") // reference an object through getelementid
Document. getelementid ("odiv ").
Document. getelementid ("odiv"). Display = "NONE"
/* 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 */
----------------------------
Four attributes of a layer object
Document. getelementbyid ("ID"). innertext // dynamic output text
Document. getelementbyid ("ID"). innerhtml // dynamically output html
Document. getelementbyid ("ID"). outertext // same as innertext
Document. getelementbyid ("ID"). outerhtml // same as innerhtml
----------------------------
Sample Code:
<HTML>
<Script language = "JavaScript">
Function Change (){
Document. All. odiv. style. Display = "NONE"
}
</SCRIPT>
<Div id = "odiv" onclick = "Change ()"> text </div>
</Html>
<HTML>
<Script language = "JavaScript">
Function changetext (){
Document. getelementbyid ("odiv"). innertext = "newtext"
}
</SCRIPT>
<Div id = "odiv" onmouseover = "changetext ()"> text </div>
</Html>
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
