Object properties
The code copy is as follows:
document.title //Set the <title> tag that is equivalent to HTML
document.bgColor //Set the page background color
document.fgColor //Set the foreground color (text color)
document.linkColor //Unclicked link color
document.alinkColor //Activate the color of the link (focus on this link)
document.vlinkColor // Clicked link color
document.URL //Set URL properties to open another web page 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 Simplified Chinese: gb2312
===============================================================================================
body-subject
The code copy is as follows:
document.body //The beginning and end of the specified document body are equivalent to <body></body>
document.body.bgColor //Set or get the background color behind the object
document.body.link //Unclicked link color
document.body.alink // Activate the color of the link (focus on this link)
document.body.vlink // Clicked link color
document.body.text // Text color
document.body.innerText //Set the text between <body>...</body>
document.body.innerHTML //Set HTML code between <body>...</body>
document.body.topMargin //Page Margin
document.body.leftMargin //Page left margin
document.body.rightMargin //Page right margin
document.body.bottomMargin //Margin on the page
document.body.background // Background picture
document.body.appendChild(oTag) //Dynamicly generate an HTML object
Common Object Events
The code copy is as follows:
document.body.onclick="func()" //The mouse pointer clicks the object is triggered
document.body.onmouseover="func()" //Flashed when the mouse pointer moves to the object
document.body.onmouseout="func()" //Flashed when the mouse pointer is moved out of the object
===============================================================================================
location-position subobject
The code copy is as follows:
document.location.hash // The part after number #
document.location.host // Domain name + port number
document.location.hostname // Domain name
document.location.href // Complete URL
document.location.pathname // Directory part
document.location.port // Port number
document.location.protocol // Network protocol (http:)
document.location.search // The part after the ? number
Common Object Events
The code copy is as follows:
documenty.location.reload() //Refresh the web page
document.location.reload(URL) //Open a new web page
document.location.assign(URL) //Open a new web page
document.location.replace(URL) //Open a new web page
===============================================================================================
images collection (images in page)
a) Reference through collection
The code copy is as follows:
document.images //The <img> tag on the corresponding page
document.images.length //The number of <img> tags on the corresponding page
document.images[0] //The first <img> tag
document.images //i-1 <img> tag
b) Direct reference through the name attribute
The code copy is as follows:
<img name="oImage">
document.images.oImage //document.images.name property
c) src attribute of reference picture
The code copy is as follows:
document.images.oImage.src //document.images.name attribute.src
d) Create an image
The code copy is as follows:
var oImage
oImage = new Image()
document.images.oImage.src="1.jpg"
At the same time, create a <img> tag on the page and it can be displayed
Sample code (dynamic creation):
The code copy is as follows:
<html>
<img name=oImage>
<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 collection (forms in page)
a) Reference through collection
The code copy is as follows:
document.forms //The <form> tag on the corresponding page
document.forms.length //The number of <form> tags on the corresponding page
document.forms[0] //The first <form> tag
document.forms //i-1 <form> tag
document.forms.length //Number of controls in the i-1th <form>
document.forms.elements[j] //The j-1st control in the i-1th <form>
--------------------------------------------------------------------------------------------------------------------------------
b) Direct reference through the tag name attribute
The code copy is as follows:
<form name="Myform"><input name="myctrl"></form>
document.Myform.myctrl //document.Form name.Control name
--------------------------------------------------------------------------------------------------------------------------------
c) Access form properties
The code copy is as follows:
document.forms.name //corresponding to <form name> attribute
document.forms.action // Corresponding to <form action> attribute
document.forms.encoding //corresponding to <form enctype> attribute
document.forms.target // Corresponding to <form target> attribute
document.forms.appendChild(oTag) // Dynamically insert a control
--------------------------------------------------------------------------------------------------------------------------------
Sample code (form):
The code copy is as follows:
<html>
<!--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>
</html>
--------------------------------------------------------------------------------------------------------------------------------
Sample code (checkbox):
The code copy 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(){
//Transfer the checkbox control value and determine 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+"Unselected")
}
}
</script>
<a href=# onclick="fun()">ddd</a>
</html>
--------------------------------------------------------------------------------------------------------------------------------
Sample code (Select):
The code copy 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">
//Transfer 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">
//Transfer the option item 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 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 of the select control
var oOption = document.createElement("OPTION");
oOption.text="4";
oOption.value="4";
document.Myform.oSelect.add(oOption);
</script>
<html>
===============================================================================================
Div collection (layers in page)
The code copy is as follows:
<Div id="oDiv">Text</Div>
document.all.oDiv //Reference layer oDiv
document.all.oDiv.style.display="" //The layer is set to visual
document.all.oDiv.style.display="none" //The layer is set to hide
document.getElementId("oDiv") //Reference object through 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 layer object
The code copy is as follows:
document.getElementById("ID").innerText // Dynamic output text
document.getElementById("ID").innerHTML //Dynamic output HTML
document.getElementById("ID").outerText //Same innerText
document.getElementById("ID").outerHTML //Same as innerHTML
--------------------------------------------------------------------------------------------------------------------------------
Sample code:
The code copy 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>