[Web programming] Detailed description of document objects
Document Object-Javascript script language description
---------------------------------------------------------------------
Note: The element name attribute on the page and the name referenced by JavaScript must be case-sensitive.
Otherwise, you will be prompted with an error message "the referenced element is null or not an object"
---------------------------------------------------------------------
Object Attributes
Document. Title // set the document title is equivalent to the <title> tag of HTML.
Document. bgcolor // set the background color of the page
Document. fgcolor // set the foreground color (text color)
Document. linkcolor // The link color that has not been clicked
Document. alinkcolor // the color of the activation Link (focus on this link)
Document. vlinkcolor // the color of the clicked Link
Document. url // set the URL attribute to open another webpage 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 to simplified Chinese: gb2312
---------------------------------------------------------------------
Common Object Methods
Document. Write () // dynamically write content to the page
Document. createelement (TAG) // create an HTML Tag object
Document. getelementbyid (ID) // get the object with the specified id value
Document. getelementsbyname (name) // get the object with the specified name value
Document. Body. appendchild (otag)
--------------------------------------------------------------------- Body-subject sub-Object
Document. Body // specify the beginning and end of the document body, which is equivalent to <body> </body>
Document. Body. bgcolor // set or obtain the background color behind the object
Document. Body. Link // the color of the link that has not been clicked
Document. Body. alink // the color of the activation Link (focus on this link)
Document. Body. vlink // the color of the clicked Link
Document. Body. Text // text color
Document. Body. innertext // set the text between <body>... </body>
Document. Body. innerhtml // set the HTML code between <body>... </body>
Document. Body. topmargin // top margin of the page
Document. Body. leftmargin // left margin of the page
Document. Body. rightmargin // right margin of the page
Document. Body. bottommargin // bottom margin of the page
Document. Body. Background // background image Document. Body. appendchild (otag) // dynamically generate an HTML Object Common Object events
Document. Body. onclick = "func ()" // The mouse pointer clicks the object to be triggered
Document. Body. onmouseover = "func ()" // triggered when the mouse pointer is moved to an object
Document. Body. onmouseout = "func ()" // triggered when the mouse pointer is removed from an object
---------------------------------------------------------------------
Location-location sub-Object Part after document. Location. Hash // #
Document. Location. host // domain name + port number
Document. Location. hostname // Domain Name
Document. Location. href // complete URL
Document. Location. pathname // directory
Document. Location. Port // port number
Document. Location. Protocol // network protocol (HTTP :)
Document. Location. Search //? Part after Using eny. Location. Reload () // refresh the webpage
Document. Location. Reload (URL) // open a new webpage
Document. Location. Assign (URL) // open a new webpage
Document. Location. Replace (URL) // open a new webpage
---------------------------------------------------------------------
Selection-Selection Sub-Object
Document. Selection
--------------------------------------------------------------------- Images set (images in the page) A) reference through a set
Document. Images // The label on the corresponding page
Document. Images. Length // Number of labels on the corresponding page
Document. Images [0] // 1st tags
Document. Images [I] // The I-1 label B) direct reference through the Nane attribute
Document. Images. oimage // document. Images. Name attribute C) reference the image's src attribute
Document. Images. oimage. SRC // document. Images. Name attribute. SRC D) create an image
VaR oimage
Oimage = new image ()
Document. Images. oimage. src = "1.jpg"
At the same time, you can create a tag on the page to display it. <HTML>
<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 set (forms in the page) A) reference through a set
Document. Forms // The <form> tag on the corresponding page
Document. Forms. Length // Number of <form> labels on the corresponding page
Document. Forms [0] // 1st <form> tags
Document. Forms [I] // The I-1 <form> label
Document. Forms [I]. Length // number of controls in the I-1 <form>
Document. Forms [I]. elements [J] // The I-1 control in the J-1 <form> B) direct reference through the label name attribute
<Form name = "myform"> <input name = "myctrl"> </form>
Document. myform. myctrl // document. form name. Control name C) Access Form attributes
Document. Forms [I]. Name // corresponds to the <form name> attribute
Document. Forms [I]. Action // corresponds to the <form action> attribute
Document. Forms [I]. Encoding // corresponds to the <form enctype> attribute
Document.formspolici2.16.tar get // corresponding to the <form target> attribute Document. Forms [I]. appendchild (otag) // dynamically insert a control
-----------------------------------------------------------------------
<HTML>
<! -- Script related to the text control -->
<Form name = "myform">
<Input type = "text" name = "otext">
<Input type = "password" name = "opswd">
<Form>
<Script language = "JavaScript">
// Obtain the value of the text password box
Document. Write (document. myform. otext. value)
Document. Write (document. myform. opswd. value)
</SCRIPT>
</Html>
-----------------------------------------------------------------------
<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 (){
// Traverse the value of the checkbox control and determine whether to select
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 + "selected ")
Else
Alert (V = V + "unselected ")
}
}
</SCRIPT>
<A href = # onclick = "Fun ()"> DDD </a>
</Html>
-----------------------------------------------------------------------
<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">
// Traverse the option items of the 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">
// Traverse the option and determine 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 the selected option based on 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 Add 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 id = "odiv"> text </div>
Document. All. odiv // reference layer odiv
Document. All. odiv. style. Display = "" // set the layer to visible.
Document. All. odiv. style. Display = "NONE" // The layers are hidden.
Document. getelementid ("odiv") // reference an object through getelementid
Document. getelementid ("odiv"). Style = ""
Document. getelementid ("odiv"). Display = "NONE"
/* Document. All indicates the set of all objects in the document.
Only ie supports this attribute, so it is also used to determine the browser type */ Four attributes of a layer object
Document. getelementbyid ("ID"). innertext // dynamic output text
Document. getelementbyid ("ID"). innerhtml // dynamically output html
Document. getelementbyid ("ID"). outertext // same as innertext
Document. getelementbyid ("ID"). outerhtml // same as innerhtml <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> |
