Home > Developer > JavaScript
Object Properties
document.title//Set document title equivalent to HTML <title> tags
document.bgcolor//Set page background color
Document.fgcolor//Set foreground (text color)
Document.linkcolor//non-clicked link color
document.alinkcolor//Activate link (focus on this link) color
document.vlinkcolor//clicked link color
document. URL//Set URL property to open another page in the same window
document.filecreateddate//File creation date, read-only property
document.filemodifieddate//File modification date, read-only property
document.filesize//File size, read-only property
Document.cookie//Set up and read out cookies
Document.charset//Set character sets Simplified Chinese: gb2312
======================================================================
body-Principal Sub-object
document.body//Specifies the beginning and end of a document body equivalent to <body></body>
Document.body.bgColor//Sets or gets the background color behind the object
Document.body.link//non-clicked link color
document.body.alink//Activate link (focus on this link) color
document.body.vlink//clicked link color
document.body.text//Text color
Document.body.innerText//Set text between <body>...</body>
Document.body.innerHTML//settings <body>...</body> HTML code between
document.body.topMargin//page top margin
document.body.leftMargin//page left margin
document.body.rightMargin//page right margin
document.body.bottomMargin//page bottom margin
document.body.background//Background image
Document.body.appendChild (Otag)//dynamically generate an HTML object
Common Object Events
document.body.onclick= "func ()"//mouse pointer Click object is triggered
document.body.onmouseover= "func ()"//mouse pointer is triggered when moving to an object
document.body.onmouseout= "func ()"///mouse pointer is triggered when the object is moved out
======================================================================
location-Position Sub-object
Document.location.hash//#号后的部分
document.location.host//domain + port number
document.location.hostname//Domain name
document.location.href//full URL
document.location.pathname//directory Section
Document.location.port//Port number
Document.location.protocol//Network Protocol (http:)
section after Document.location.search//?
Common Object Events
documeny.location.reload ()//Refresh Web page
document.location.reload (URL)//Open a new page
document.location.assign (URL)//Open a new page
document.location.replace (URL)//Open a new page
======================================================================
Images collection (images in a page)
a) by collection reference
document.images// tags on the corresponding page
Document.images.length//number of tags on the corresponding page
Document.images[0]//1th tags
Document.images//Section i-1 tags
b) Direct reference through the Name property
Document.images.oImage//document.images.name Properties
c) The SRC attribute of the reference picture
Document.images.oImage.src//document.images.name property. src
d) Create an image
var oimage
Oimage = new Image ()
Document.images.oimage.src= "1.jpg"
At the same time, create a tag on the page corresponding to the display
Example code (dynamically creating images):
<script language= "JavaScript" >
var oimage
Oimage = new Image ()
Document.images.oimage.src= "1.jpg"
</script>
<script language= "JavaScript" >
Oimage=document.caeateelement ("IMG")
Oimage.src= "1.jpg"
Document.body.appendChild (Oimage)
</script>
=====================================================================
Forms Collection (forms in a page)
a) by collection reference
Document.forms//<form> tags on the corresponding page
Document.forms.length//number of <form> tags on the corresponding page
Document.forms[0]//1th <form> tags
Document.forms//Section i-1 <form> tags
Document.forms.length//i-1 number of controls in <form>
DOCUMENT.FORMS.ELEMENTS[J]//section i-1 <form> j-1 controls
----------------------------
b) direct reference by Tag Name property
<form name= "Myform" ><input name= "Myctrl" ></form>
Document. Myform.myctrl//document. Table sole name. Control Name
----------------------------
c) Access the properties of the form
Document.forms.name//corresponding <form name> property
Document.forms.action//corresponding <form action> property
document.forms.encoding//corresponding <form enctype> property
Document.forms.target//corresponding <form target> property
Document.forms.appendChild (Otag)//Insert a control dynamically
----------------------------
Sample code (Form):
<!--text control related script-->
<form name= "Myform" >
<input type= "text" name= "Otext" >
<input type= "Password" name= "OPSWD" >
<form>
<script language= "JavaScript" >
Gets the value of the text password box
document.write (document. Myform.oText.value)
document.write (document. Myform.oPswd.value)
</script>
----------------------------
Sample code (checkbox):
<!--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 () {
Iterates over the value of the CheckBox control and determines whether or not 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+ "is selected")
Else
Alert (v=v+ "unchecked")
}
}
</script>
<a href=# onclick= "Fun ()" >ddd</a>
----------------------------
Sample code (SELECT):
<!--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" >
To traverse the option item 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 item and determine if 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 out the selected option according to SelectedIndex
(0 to document.) MYFORM.OSELECT.LENGTH-1)
I=document. Myform.oSelect.selectedIndex
document.write (document. Myform.oSelect.value)
</script>
<script language= "JavaScript" >
To dynamically add option items to the Select control
var ooption = document.createelement ("OPTION");
ooption.text= "4";
Ooption.value= "4";
Document. Myform.oSelect.add (ooption);
</script>
======================================================================
Div Collection (layers in a page)
<div id= "Odiv" >Text</Div>
DOCUMENT.ALL.ODIV//reference layer Odiv
Document.all.odiv.style.display= ""//layer is set to visual
Document.all.odiv.style.display= "None"//layer is set to hidden
Document.getelementid ("Odiv")//referencing objects by Getelementid
Document.getelementid ("Odiv").
Document.getelementid ("Odiv"). display= "None"
/*document.all represents a collection of all objects in document
only IE supports this property, so it is also used to determine the type of browser * /
4 properties of a Layer object
document.getElementById ("ID"). InnerText//Dynamic output text
document.getElementById ("ID"). InnerHTML//Dynamic output HTML
document.getElementById ("ID"). Outertext//With innertext
document.getElementById ("ID"). outerHTML//With innerHTML
----------------------------
Example code:
<script language= "JavaScript" >
function Change () {
Document.all.odiv.style.display= "None"
}
</script>
<div id= "Odiv" onclick= "Change ()" >Text</Div>
<script language= "JavaScript" >
function Changetext () {
document.getElementById ("Odiv"). innertext= "NewText"
}
</script>
<div id= "Odiv" onmouseover= "Changetext ()" >Text</Div>
JavaScript Basics----Document Object
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
