Document text Object-JavaScript scripting language description
Note: The names of the element name attribute and JavaScript reference on the page must be consistent including case
Or you'll be prompted with an error message "The referenced element is empty or not an object"
| The code is as follows |
Copy Code |
| Object Properties
Document.title//Set document title equivalent to HTML title tag
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
———————————————————————
Common Object Methods
document.write ()///write content dynamically to page
Document.createelement (tag)//Create an HTML tag object
document.getElementById (ID)//Get object with specified ID value
Document.getelementsbyname (name)//Get object with specified Name value
Document.body.appendChild (Otag)
———————————————————————
body-the principal child object
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 the text between body>.../body>
Document.body.innerHTML//Set of 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
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
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
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
———————————————————————
selection-Selection Child Objects
Document.selection
———————————————————————
Images collection (image on page)
A) by reference to the collection
Document.images//the IMG tag on the corresponding page
Document.images.length//The number of IMG tags on the page
Document.images[0]//1th img Tag
Document.images[i]//i-1 img Tags
b) Direct reference through the Nane property
IMG name= "Oimage"
Document.images.oImage//document.images.name Properties
c) referencing the SRC attribute of a picture
Document.images.oImage.src//document.images.name properties. src
d) Create an image
var oimage
Oimage = new Image ()
Document.images.oimage.src= "1.jpg"
Also create an IMG/tag on the page to show
———————————————————————-
Forms collection (Forms on page)
A) by reference to the collection
Document.forms//corresponding form labels on the page
Number of/formform labels on the document.forms.length//corresponding page
Document.forms[0]//1th/formform label
Document.forms[i]//i-1/formform label
Number of controls in Document.forms[i].length//I-1/formform
DOCUMENT.FORMS[I].ELEMENTS[J]//i-1 j-1 controls in/formform
b) direct reference through the label Name property
/formform name= "Myform" >input name= "Myctrl"/>/form
Document. Myform.myctrl//document. Table Single-name. Control Name
c) Accessing the properties of the form
Document.forms[i].name//Corresponding Form Name> property
Document.forms[i].action//Correspondence/formform action> Properties
Document.forms[i].encoding//Correspondence/formform enctype> Properties
Document.forms[i].target//Correspondence/formform target> Properties
Document.forms[i].appendchild (Otag)//Insert a control dynamically
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"). style= "
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
document.getElementById ("ID"). innertext//Dynamic output text
document.getElementById ("ID"). InnerHTML//Dynamic output HTML
document.getElementById ("ID"). Outertext//InnerText
document.getElementById ("ID"). outerHTML//innerHTML |
d) Create an image
| The code is as follows |
Copy Code |
1.var Oimage
2.oImage = new Image ()
3.document.images.oimage.src= "/1.jpg" |
At the same time, create a label on the page to show the corresponding
| The code is as follows |
Copy Code |
<script language= "JavaScript" >
var oimage
Oimage = new Image ()
Document.images.oimage.src= "/1.jpg"
</script>
|
Forms collection (Forms on page)
A) by reference to the collection
| The code is as follows |
Copy Code |
Java code 1.document.forms//<form> tag on the corresponding page
Number of <form> tags on the 2.document.forms.length//corresponding page
3.document.forms[0]//1th <form> tags
4.document.forms[i]//First i-1 <form> label
Number of controls in 5.document.forms[i].length//I-1 <form>
6.DOCUMENT.FORMS[I].ELEMENTS[J]//i-1 <form> j-1 controls |
b) direct reference through the label Name property
| The code is as follows |
Copy Code |
<form name= "Myform" >
<input name= "Myctrl" >
</form>
Document. Myform.myctrl
Document. Table Single-name. Control Name |
Text Control related
| The code is as follows |
Copy Code |
<!--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>
|
Select control related
| The code is as follows |
Copy Code |
| <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[i].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[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 out selected option according to 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 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>
|
Reference Layer Odiv
| code is as follows |
copy code |
<div ID = "Odiv" >text</div>
Document.all.oDiv//document.all.odiv.style
document.all.odiv.style.display= " "//Layer set to Visual
Document.all.odiv.style.display=" None "//Layer set to hidden |
