Object Properties
Copy Code code as follows:
Document.title//Set document title equivalent to HTML <title> label
Document.bgcolor//Set page background color
Document.fgcolor//Set foreground colors (text color)
Document.linkcolor//not-clicked link color
Document.alinkcolor//Activate the color of the link (focus on this link)
Document.vlinkcolor//clicked on 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 set Simplified Chinese: gb2312
======================================================================
body-the principal child object
Copy Code code as follows:
Document.body//Specifies that the start and end of the document body is equivalent to <body></body>
Document.body.bgColor//Sets or gets the background color behind the object
Document.body.link//not-clicked link color
Document.body.alink//Activate the color of the link (focus on this link)
Document.body.vlink//clicked on link color
Document.body.text//Text color
Document.body.innerText//Set text between <body>...</body>
Document.body.innerHTML//Set HTML code between <body>...</body>
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 picture
Document.body.appendChild (Otag)//dynamically generate an HTML object
Common Object Events
Copy Code code as follows:
Document.body.onclick= "func ()"//mouse pointer Click object is triggered
Document.body.onmouseover= when the "func ()"//mouse pointer moves over an object
Trigger when document.body.onmouseout= "func ()"//mouse pointer moves out of an object
======================================================================
location-Position child Object
Copy Code code as follows:
Document.location.hash//#号后的部分
Document.location.host//Domain name + port number
Document.location.hostname//Domain
Document.location.href//Full URL
Document.location.pathname//directory section
Document.location.port//Port number
Document.location.protocol//Network Protocol (http:)
Document.location.search//number of parts after
Common Object Events
Copy Code code as follows:
Documeny.location.reload ()//Refresh Page
Document.location.reload (URL)//Open new page
Document.location.assign (URL)//Open new page
Document.location.replace (URL)//Open new page
======================================================================
Images collection (image on page)
A) by reference to the collection
Copy Code code as follows:
Document.images// labels on the corresponding page
Number of tags on the document.images.length//corresponding page
Document.images[0]//1th tags
Document.images//First i-1 label
b) Direct reference through the Name property
Copy Code code as follows:
Document.images.oImage//document.images.name Properties
c) referencing the SRC attribute of a picture
Copy Code code as follows:
Document.images.oImage.src//document.images.name properties. src
d) Create an image
Copy Code code as follows:
var oimage
Oimage = new Image ()
Document.images.oimage.src= "1.jpg"
At the same time, create a label on the page to show the corresponding
Sample code (dynamically creating images):
Copy Code code as follows:
<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 on page)
A) by reference to the collection
Copy Code code as follows:
Document.forms//<form> labels on the corresponding page
Number of <form> tags on the document.forms.length//corresponding page
Document.forms[0]//1th <form> tags
Document.forms//First i-1 <form> label
Number of controls in Document.forms.length//I-1 <form>
DOCUMENT.FORMS.ELEMENTS[J]//i-1 <form> j-1 controls
----------------------------
b) direct reference through the label Name property
Copy Code code as follows:
<form name= "Myform" ><input name= "Myctrl" ></form>
Document. Myform.myctrl//document. Table Single-name. Control Name
----------------------------
c) Accessing the properties of the form
Copy Code code as follows:
Document.forms.name//Correspondence <form name> Properties
Document.forms.action//Correspondence <form action> Properties
Document.forms.encoding//Correspondence <form enctype> Properties
Document.forms.target//Correspondence <form target> Properties
Document.forms.appendChild (Otag)//Insert a control dynamically
----------------------------
Sample code (Form):
Copy Code code as follows:
<!--text control related script-->
<form name= "Myform" >
<input type= "text" name= "Otext" >
<input type= "Password" name= "OPSWD" >
<form>
<script language= "JavaScript" >
Get the value of the text password box
document.write (document. Myform.oText.value)
document.write (document. Myform.oPswd.value)
</script>
----------------------------
Sample code (checkbox):
Copy Code code as follows:
<!--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 () {
Traverses the value of the CheckBox control and determines whether it is selected
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+ "unchecked")
}
}
</script>
<a href=# onclick= "Fun ()" >ddd</a>
----------------------------
Sample code (SELECT):
Copy Code code as follows:
<!--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 a 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" >
Traverses the option and determines 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 out 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" >
Dynamically increase the option item for a 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)
Copy Code code as follows:
<div id= "Odiv" >Text</Div>
DOCUMENT.ALL.ODIV//reference layer Odiv
Document.all.odiv.style.display= ""//Layer set to Visual
Document.all.odiv.style.display= "None"//layer set to hidden
Document.getelementid ("Odiv")//Reference object by Getelementid
Document.getelementid ("Odiv").
Document.getelementid ("Odiv"). display= "None"
/*document.all represents a collection of all objects in the document
Only IE supports this attribute, so it is also used to determine the type of browser.
4 properties of a Layer object
Copy Code code as follows:
document.getElementById ("ID"). innertext//Dynamic output text
document.getElementById ("ID"). InnerHTML//Dynamic output HTML
document.getElementById ("ID"). Outertext//InnerText
document.getElementById ("ID"). outerHTML//innerHTML
----------------------------
Sample code:
Copy Code code as follows:
<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>
