Home > Article > Web Front-end > Summary of Document properties and methods of JS_Basic knowledge
Summary of Document properties and methods of JS_Basic knowledge
- WBOYOriginal
- 2016-05-16 17:22:16978browse
document.title //Set the document title equivalent to the HTML title tag
document.bgColor //Set the page background color
document.fgColor //Set the foreground color (text color)
document.linkColor // Color of links that have not been clicked
document.alinkColor //Color of active links (focus is on this link)
document.vlinkColor //Color of links that have been clicked
document.URL //Set URL attributes Thus opening another webpage in the same window
document.fileCreatedDate //File creation date, read-only attribute
document.fileModifiedDate //File modification date, read-only attribute
document.charset //Set the character set Simplified Chinese: gb2312
document.fileSize //File size, read-only attribute
document.cookie //Set and read cookies
—————————————— ——————————
Common object methods
document.write() //Dynamicly 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-body sub-object
document.body //Specify the start and end of the document body Equivalent to body>/body>
document.body.bgColor //Set or get the background color behind the object
document.body.link //The color of unclicked links
document.body.alink //The color of the active link (the focus is on this link)
document.body.vlink //The color of the clicked link
document.body.text //The text color
document.body.innerText / /Set the text between body>.../body>
document.body.innerHTML //Set the HTML code between body>.../body>
document.body.topMargin //The top margin of the page
document.body.leftMargin //Left margin of page
document.body.rightMargin //Right margin of page
document.body.bottomMargin //Bottom margin of page
document.body.background //Background image
document.body.appendChild(oTag) //Dynamicly generate an HTML object
Common object events
document.body.onclick=”func()” //The object clicked by the mouse pointer is Trigger
document.body.onmouseover=”func()” //Trigger when the mouse pointer moves to the object
document.body.onmouseout=”func()” //Trigger when the mouse pointer moves out of the object
— ————————————————————————
location-location sub-object
document.location.hash // The part after #
document.location.host // Domain name and port number // It seems that the host name localhost is returned, but no port number is returned
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 // ? number The last part
documenty.location.reload() //Refresh the webpage
document.location.reload(URL) //Open a new webpage
document.location.assign(URL) //Open a new one Web page
document.location.replace(URL) //Open a new web page
——————————————————————————
selection-selection Sub-object
document.selection
For example:
selection’s createRange method
document.selection.createRange() returns a TextRange object based on the current text selection, or a ControlRange object based on the control selection.
With execCommand, it is very useful in HTML editors, such as: text bold, italics, copy, paste, create hyperlinks, etc.
These seem to be only possible under IE. .
————————————————————————
images collection (images on the page)
a) Reference through collection
document.images //corresponding to the img tag on the page
document.images.length //corresponding to the number of img tags on the page
document.images[0] //1st img tags
document.images[i] //i-1th img tag
b) Directly reference
img name=”oImage”
document.images through the name attribute. oImage //document.images.name attribute
c) refers to the src attribute of the image
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 create an img/tag on the page corresponding to it Can display
————————————————————————-
forms collection (forms in the page)
a) Reference through collection
document.forms //corresponding to the form tag on the page
document.forms.length //corresponding to the number of /formform tags on the page
document.forms[0] / /The 1st/formform label
document.forms[i] //The i-1th/formform label
document.forms[i].length //The number of controls in the i-1th/formform
document.forms[i].elements[j] //The j-1th control in the i-1/formform
b) Directly reference the
/formform name through the label name attribute =”Myform”>input name=”myctrl”/>/form
document.Myform.myctrl //document.form name.control name
c) Access the properties of the form
document .forms[i].name //Corresponds to form name>Attribute
document.forms[i].action //Corresponds to/formform action>Attribute
document.forms[i].encoding //Corresponds to/formform enctype> ;Property
document.forms[i].target //Corresponds to /formform target>Property
document.forms[i].appendChild(oTag) //Dynamicly insert a control
document.all .oDiv //Reference layer oDiv
document.all.oDiv.style.display=”” //Set the layer to be visible
document.all.oDiv.style.display=”none” //Figure The layer is set to hidden
document.getElementId("oDiv") //Reference the object through getElementId
document.getElementId("oDiv").
document.getElementId("oDiv").display =”none”
/*document.all represents the collection of all objects in the document
Only IE supports this attribute, so it is also used to determine the type of browser*/
Layer 4 attributes of the object
document.getElementById(”ID”).innerText //Dynamic output text
document.getElementById(”ID”).innerHTML //Dynamic output HTML
document.getElementById(”ID ”).outerText //Same as innerText
document.getElementById(”ID”).outerHTML //Same as innerHTML
------------------ -------------------------------------------------- -------------------------------------------------- ---------------------------------------------
document.readyState: Determine whether the document has been loaded. Firefox does not support it.
This attribute is read-only, and the returned value has the following possibilities:
0-UNINITIALIZED: The XML object was generated, but no file was loaded.
1-LOADING: The loading process is in progress, but the file has not yet started parsing.
2-LOADED: Some files have been loaded and parsed, but the object model has not yet taken effect.
3-INTERACTIVE: Only valid for loaded partial files, in which case the object model is valid but read-only.
4-COMPLETED: The file has been completely loaded, indicating that the loading is successful.
document.onreadystatechange = subSomething;//When the page is loaded Execute this method when changing.
function subSomething()
{
if(document.readyState == "complete"){ //When the page loading status is complete, enter
//you The operation to be done.
}
else if(document.readyState=="loading"){
}
}
Good example: http://www.jb51.net/article/20445.htm
Explanation: The onreadystatechange event can identify changes in the readyState attribute.
document.all (only supported by IE)
action: document.layers is a property exclusive to Netscape 4.x. It is a property that represents all files stored in it such as
document.layers and document The usage of .all is the same and the function is the same. So I will only introduce one usage:
document.all means all elements of the document, which means that it contains all elements of the current web page. It saves the attributes of elements in the form of an array, so we can use document.all["element name"].Attribute name="attribute value" to dynamically change the attributes of the element. Using this statement, you can create many dynamic web page effects, such as: dynamically changing pictures, dynamically changing the background of text, dynamically changing the background of web pages, dynamically changing the size of pictures, dynamically changing the size and color of text, etc. You can control virtually every web page element dynamically.
document.all[] This array can access all elements in the document.
Example 1 (this allows you to understand which objects are in the document)
"http://www.w3.org/TR/xhtml1/DTD/xhtml1 -transitional.dtd">
The above example lets you understand how to access a specific element in the document, such as a DIV in the document
, you This DIV can be accessed through its ID, NAME or INDEX attribute:
document.all["docid"]
document.all["docname"]
document.all.item("docid")
document.all.item("docname")
document.all[7]
document.all.tags("div") returns an array of all DIVs in the document. In this example, there is only one DIV. So you can access it with document.all.tags("div")[0].
3. Use document.all[]
Example 3
"http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">
< ;body>