Summary of Document properties and methods of JS_Basic knowledge
WBOY
Release： 2016-05-16 17:22:16
Original
1016 people have browsed it
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
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
or object, but they do not contain other elements
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)
Document.All Example< ;/title> <br><meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> <br></head> <br>< body> <br><h1>Example Heading</h1> <br><hr /> <br><p>This is a <em>paragraph</em>. It is only a < em>paragraph.</em></p> <br><p>Yet another <em>paragraph.</em></p> <br><p>This final < em>paragraph</em> has <em id="special">special emphasis.</em></p> <br><hr /> <br><script type="text /javascript"> <br><!-- <BR>var i,origLength; <BR>origLength = document.all.length; <BR>document.write('document.all.length=' origLength "< ;br />"); <br>for (i = 0; i < origLength; i ) <BR>{ <BR>document.write("document.all[" i "]=" document.all[ i].tagName "<br />"); <br>} <br>//--> <br></script> <br></body> <br></html> ; <BR></div> <BR>The execution result is: <BR>Example Heading <br><br>----------------------- -------------------------------------------------- ------- <br><br>This is a paragraph. It is only a paragraph. <BR>Yet another paragraph. <BR>This final paragraph has special emphasis. <br><br>--- -------------------------------------------------- ----------------------------- <br><br>document.all.length=18 <BR>document.all[0]= ! <BR>document.all[1]=HTML <BR>document.all[2]=HEAD <BR>document.all[3]=TITLE <BR>document.all[4]=META <BR>document. all[5]=BODY <BR>document.all[6]=H1 <BR>document.all[7]=HR <BR>document.all[8]=P <BR>document.all[9]=EM <BR>document.all[10]=EM <BR>document.all[11]=P <BR>document.all[12]=EM <BR>document.all[13]=P <BR>document.all [14]=EM <BR>document.all[15]=EM <BR>document.all[16]=HR <BR>document.all[17]=SCRIPT <BR>(Note that it can only run on IE ) <BR><div class="codetitle"><span><a style="CURSOR: pointer" data="5486" class="copybut" id="copybut5486" onclick="doCopy('code5486')"><U>Copy code </U></a></span> The code is as follows: </div><div class="codebody" id="code5486"> <BR><html> <br><head> <br><meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <br><title>Click the DIV to change color
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].
