Home > Developer > JavaScript
For details about the use of document objects in JavaScript, refer criptdocument
Object Attributes
Copy codeThe Code is as follows:
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
========================================================== ====================================
Body-subject sub-Object
Copy codeThe Code is as follows:
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 the HTML code between <body>... </body>
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
Copy codeThe Code is as follows:
Document. body. onclick = "func ()" // The mouse pointer clicks the object to be 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
========================================================== ====================================
Location-location sub-Object
Copy codeThe Code is as follows:
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
Copy codeThe Code is as follows:
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
========================================================== ====================================
Images set (images in the page)
A) reference through a set
Copy codeThe Code is as follows:
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 // The I-1 of the label
B) direct reference through the name attribute
Copy codeThe Code is as follows:
Document. images. oImage // document. images. name attribute
C) reference the image's src attribute
Copy codeThe Code is as follows:
Document. images. oImage. src // document. images. name attribute. src
D) create an image
Copy codeThe Code is as follows:
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 ):
Copy codeThe Code is as follows:
<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
Copy codeThe Code is as follows:
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 // The I-1 of the <form> label
Document. forms. length // number of controls in the I-1 <form>
Document. forms. elements [j] // The I-1 controls in the J-1 <form>
----------------------------
B) direct reference through the label name attribute
Copy codeThe Code is as follows:
<Form name = "Myform"> <input name = "myctrl"> </form>
Document. Myform. myctrl // document. form name. Control name
----------------------------
C) Access Form attributes
Copy codeThe Code is as follows:
Document. forms. name // corresponds to the <form name> attribute
Document. forms. action // corresponds to the <form action> attribute
Document. forms. encoding // corresponds to the <form enctype> attribute
Document.forms.tar get // corresponds to the <form target> attribute
Document. forms. appendChild (oTag) // insert a control dynamically
----------------------------
Sample Code (form ):
Copy codeThe Code is as follows:
<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 ):
Copy codeThe Code is as follows:
<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. value
B = document. forms [0]. chk. checked
If (B)
Alert (v = v + "selected ")
Else
Alert (v = v + "unselected ")
}
}
</Script>
<A href = # onclick = "fun ()"> ddd </a>
</Html>
----------------------------
Sample Code (Select ):
Copy codeThe Code is as follows:
<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. 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. selected! = True)
Document. write (document. Myform. oSelect. value)
Else
Document. write ("<font color = red>" + document. Myform. oSelect. 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. 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)
Copy codeThe Code is as follows:
<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
Copy codeThe Code is as follows:
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:
Copy codeThe Code is as follows:
<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
