document text block object - JavaScript scripting language to describe
-------------------------------------------------- -------------------
Note: The page name attributes and JavaScript elements cited include the case name must be consistent
Otherwise, you will be prompted an error message "element references the object is empty or not"
-------------------------------------------------- -------------------
Object Properties
document.title / / set the document title is equivalent to HTML's <title> Tags
document.bgColor / / set the page background color
document.fgColor / / Set Foreground (text color)
document.linkColor / / not clicked on the link colors
document.alinkColor / / activate the link (focus in on this link) colors
document.vlinkColor / / has been clicked on the link colors
document.URL / / set the URL attribute in order to open another window in the same page
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 up and read out the cookie
document.charset / / set the character set Simplified Chinese: gb2312
-------------------------------------------------- -------------------
Common Object
document.write () / / write dynamic content to the page
document.createElement (Tag) / / create a label object html
document.getElementById (ID) / / get the value of the specified object ID
document.getElementsByName (Name) / / get the value of the specified object Name
document.body.appendChild (oTag)
-------------------------------------------------- -------------------
body-the main sub-object
document.body / / specify the main document of the beginning and the end is equivalent to <body> </ body>
document.body.bgColor / / set or access to the background color behind the object
document.body.link / / not clicked on the link colors
document.body.alink / / activate the link (focus in on this link) colors
document.body.vlink / / has been clicked on the link colors
document.body.text / / text color
document.body.innerText / / set <body> ...</ body> of the text between the
document.body.innerHTML / / set <body> ...</ body> of the HTML code between the
document.body.topMargin / / page margins
document.body.leftMargin / / page from the left
document.body.rightMargin / / from the right side of the page
document.body.bottomMargin / / page under the margin
document.body.background / / background picture
document.body.appendChild (oTag) / / dynamically generate an HTML object
Common object events
document.body.onclick = "func ()" / / click the mouse pointer is triggered
document.body.onmouseover = "func ()" / / move the mouse pointer over the object when the trigger
document.body.onmouseout = "func ()" / / object when the mouse pointer out of the trigger
-------------------------------------------------- -------------------
location-location sub-object
document.location.hash / / # of the part after the No.
document.location.host / / domain name + port number
document.location.hostname / / domain name
document.location.href / / full URL
document.location.pathname / / directory part
document.location.port / / port number
document.location.protocol / / network protocol (http:)
document.location.search / /? its part of the post -
documeny.location.reload () / / refresh the 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
-------------------------------------------------- -------------------
sub-object selection-constituency
document.selection
-------------------------------------------------- -------------------
images collection (page images)
a) through the collection of reference
document.images / / the corresponding labels on the page <img>
document.images.length / / the corresponding page number labels <img>
document.images [0] / / the first one <img> Tags
document.images [i] / / first i-1 months <img> Tags
b) through direct reference attributes nane
<img name="oImage">
document.images.oImage / / document.images.name property
c) picture of the src attribute references
document.images.oImage.src / / document.images.name attributes. src
d) create an image
var oImage
oImage = new Image ()
document.images.oImage.src = "1.jpg"
At the same time, the establishment of a <img> page tab to display the corresponding
-------------------------------------------------- --------------------
collection forms (form page)
a) through the collection of reference
document.forms / / the corresponding labels on the page <form>
document.forms.length / / the corresponding page number labels <form>
document.forms [0] / / the first one <form> Tags
document.forms [i] / / first i-1 months <form> Tags
document.forms [i]. length / / first i-1 months <form> number of controls
document.forms [i]. elements [j] / / first i-1 months <form> first j-1 months control
b) through the tag name attribute to refer directly to
<form name="Myform"> <input name="myctrl"> </ form>
document.Myform.myctrl / / document. form of. control of
c) visit the properties of the form
document.forms [i]. name / / corresponding attribute <form name>
document.forms [i]. action / / correspond to attributes <form action>
document.forms [i]. encoding / / the corresponding attribute <form enctype>
document.forms [i]. target / / correspond to attributes <form target>
document.forms [i]. appendChild (oTag) / / insert a dynamic control
-------------------------------------------------- ---------------------
-------------------------------------------------- ---------------------
-------------------------------------------------- ---------------------
-------------------------------------------------- ---------------------
<Div> Text </ Div>
document.all.oDiv / / reference layer oDiv
document.all.oDiv.style.display = "" / / set layer visibility
document.all.oDiv.style.display = "none" / / set to hidden layer
document.getElementId ( "oDiv") / / object through the reference getElementId
document.getElementId ( "oDiv"). style = ""
document.getElementId ( "oDiv"). display = "none"
/ * document.all said document in a collection of all objects
Ie only support this attribute, it is also used to determine the type of browser * /
Layer 4 attributes object
document.getElementById ( "ID"). innerText / / dynamic text output
document.getElementById ( "ID"). innerHTML / / dynamic HTML output
document.getElementById ( "ID"). outerText / / with the innerText
document.getElementById ( "ID"). outerHTML / / with innerHTML
-------------------------------------------------- -------------------
Note: The page name attributes and JavaScript elements cited include the case name must be consistent
Otherwise, you will be prompted an error message "element references the object is empty or not"
-------------------------------------------------- -------------------
Object Properties
document.title / / set the document title is equivalent to HTML's <title> Tags
document.bgColor / / set the page background color
document.fgColor / / Set Foreground (text color)
document.linkColor / / not clicked on the link colors
document.alinkColor / / activate the link (focus in on this link) colors
document.vlinkColor / / has been clicked on the link colors
document.URL / / set the URL attribute in order to open another window in the same page
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 up and read out the cookie
document.charset / / set the character set Simplified Chinese: gb2312
-------------------------------------------------- -------------------
Common Object
document.write () / / write dynamic content to the page
document.createElement (Tag) / / create a label object html
document.getElementById (ID) / / get the value of the specified object ID
document.getElementsByName (Name) / / get the value of the specified object Name
document.body.appendChild (oTag)
-------------------------------------------------- -------------------
body-the main sub-object
document.body / / specify the main document of the beginning and the end is equivalent to <body> </ body>
document.body.bgColor / / set or access to the background color behind the object
document.body.link / / not clicked on the link colors
document.body.alink / / activate the link (focus in on this link) colors
document.body.vlink / / has been clicked on the link colors
document.body.text / / text color
document.body.innerText / / set <body> ...</ body> of the text between the
document.body.innerHTML / / set <body> ...</ body> of the HTML code between the
document.body.topMargin / / page margins
document.body.leftMargin / / page from the left
document.body.rightMargin / / from the right side of the page
document.body.bottomMargin / / page under the margin
document.body.background / / background picture
document.body.appendChild (oTag) / / dynamically generate an HTML object
Common object events
document.body.onclick = "func ()" / / click the mouse pointer is triggered
document.body.onmouseover = "func ()" / / move the mouse pointer over the object when the trigger
document.body.onmouseout = "func ()" / / object when the mouse pointer out of the trigger
-------------------------------------------------- -------------------
location-location sub-object
document.location.hash / / # of the part after the No.
document.location.host / / domain name + port number
document.location.hostname / / domain name
document.location.href / / full URL
document.location.pathname / / directory part
document.location.port / / port number
document.location.protocol / / network protocol (http:)
document.location.search / /? its part of the post -
documeny.location.reload () / / refresh the 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
-------------------------------------------------- -------------------
sub-object selection-constituency
document.selection
-------------------------------------------------- -------------------
images collection (page images)
a) through the collection of reference
document.images / / the corresponding labels on the page <img>
document.images.length / / the corresponding page number labels <img>
document.images [0] / / the first one <img> Tags
document.images [i] / / first i-1 months <img> Tags
b) through direct reference attributes nane
<img name="oImage">
document.images.oImage / / document.images.name property
c) picture of the src attribute references
document.images.oImage.src / / document.images.name attributes. src
d) create an image
var oImage
oImage = new Image ()
document.images.oImage.src = "1.jpg"
At the same time, the establishment of a <img> page tab to display the corresponding
<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>
-------------------------------------------------- --------------------
collection forms (form page)
a) through the collection of reference
document.forms / / the corresponding labels on the page <form>
document.forms.length / / the corresponding page number labels <form>
document.forms [0] / / the first one <form> Tags
document.forms [i] / / first i-1 months <form> Tags
document.forms [i]. length / / first i-1 months <form> number of controls
document.forms [i]. elements [j] / / first i-1 months <form> first j-1 months control
b) through the tag name attribute to refer directly to
<form name="Myform"> <input name="myctrl"> </ form>
document.Myform.myctrl / / document. form of. control of
c) visit the properties of the form
document.forms [i]. name / / corresponding attribute <form name>
document.forms [i]. action / / correspond to attributes <form action>
document.forms [i]. encoding / / the corresponding attribute <form enctype>
document.forms [i]. target / / correspond to attributes <form target>
document.forms [i]. appendChild (oTag) / / insert a dynamic control
-------------------------------------------------- ---------------------
<html> <!--Text控件相关Script--> <form name="Myform"> <input type="text" name="oText"> <input type="password" name="oPswd"> <form> <script language="javascript"> //获取文本密码框的值 document.write(document.Myform.oText.value) document.write(document.Myform.oPswd.value) </script> </html>
-------------------------------------------------- ---------------------
<html>
<!--checkbox,radio控件相关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(){
//遍历checkbox控件的值并判断是否选中
var length
length=document.forms[0].chk.length
for(i=0;i<length;i++){
v=document.forms[0].chk[i].value
b=document.forms[0].chk[i].checked
if(b)
alert(v=v+"被选中")
else
alert(v=v+"未选中")
}
}
</script>
<a href=#>ddd</a>
</html>
-------------------------------------------------- ---------------------
<html>
<!--Select控件相关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">
//遍历select控件的option项
var length
length=document.Myform.oSelect.length
for(i=0;i<length;i++)
document.write(document.Myform.oSelect[i].value)
</script>
<script language="javascript">
//遍历option项并且判断某个option是否被选中
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">
//根据SelectedIndex打印出选中的option
//(0到document.Myform.oSelect.length-1)
i=document.Myform.oSelect.selectedIndex
document.write(document.Myform.oSelect[i].value)
</script>
<script language="javascript">
//动态增加select控件的option项
var oOption = document.createElement("OPTION");
oOption.text="4";
oOption.value="4";
document.Myform.oSelect.add(oOption);
</script>
<html>
-------------------------------------------------- ---------------------
<Div> Text </ Div>
document.all.oDiv / / reference layer oDiv
document.all.oDiv.style.display = "" / / set layer visibility
document.all.oDiv.style.display = "none" / / set to hidden layer
document.getElementId ( "oDiv") / / object through the reference getElementId
document.getElementId ( "oDiv"). style = ""
document.getElementId ( "oDiv"). display = "none"
/ * document.all said document in a collection of all objects
Ie only support this attribute, it is also used to determine the type of browser * /
Layer 4 attributes object
document.getElementById ( "ID"). innerText / / dynamic text output
document.getElementById ( "ID"). innerHTML / / dynamic HTML output
document.getElementById ( "ID"). outerText / / with the innerText
document.getElementById ( "ID"). outerHTML / / with innerHTML
<html>
<script language="javascript">
function change(){
document.all.oDiv.style.display="none"
}
</script>
<Div>Text</Div>
</html>
<html>
<script language="javascript">
function changeText(){
document.getElementById("oDiv").innerText="NewText"
}
</script>
<Div>Text</Div>
</html>