A summary of the usage of JavaScript object in text-blocking objects

Source: Internet
Author: User
Tags port number

Document Object
Each HTML document that is loaded into the browser becomes the object of the document, allowing us to access all of the elements in the HTML page from the script, which is part of the Window object and can be accessed through the Window.document property

Document Object Collection
Forms returns a reference to all Form objects in a document
Grammar: document.forms[];

Cookie sets or queries all cookies associated with the current document, which is a readable, writable string that you can use to read, create, modify, and delete cookies for the current document
Grammar: Document.cookie;
Click to view Usage

Domain returns the server domain name for downloading the current document
Grammar: Document.domain;
Example: Alert (document.domain); Pop-up 192.168.1.101

Title returns the caption of the current document (text in the HTML title element)
Grammar: Document.title;

The URL returns the URL of the current document, which typically has the same value as the Location.href property of the Window that contains the document, but when URL redirection occurs, the URL property holds the actual URL of the document, and Location.href saves the request The URL
Syntax: document. URL;


Object Properties


Document.title//Set document title equivalent to HTML title tag
Document.bgcolor//Set page background color
Document.fgcolor//Set foreground colors (text color)
Document.linkcolor//not-clicked link color
Document.alinkcolor//Activate the color of the link (focus on this link)
Document.vlinkcolor//clicked on link color
Document. URL//Set URL property to open another page in the same window
Document.filecreateddate//File creation date, read-only property
Document.filemodifieddate//File modification date, read-only property
Document.charset//Set character set Simplified Chinese: gb2312
Document.filesize//File size, read-only property
Document.cookie//Set up and read out cookies


———————————————————————


Document Object method
Close () closes an output stream opened by the Document.open method and forces a display of all cached output, and if you use the Write () method to dynamically output a document, you must remember to call the close () method when you do so. To ensure that all document content is displayed, and once close () is invoked, write () should not be called again because it implicitly calls open () to erase the current document and start a new document
Syntax: Document.close ();

getElementById () returns a reference to the first object that has the specified ID
Syntax: document.getElementById (ID);

Getelementsbyname () returns a collection of objects with the specified name, similar to the getElementById () method, but it queries the element's Name property, not the id attribute, and because the Name property in one document may not be unique (such as HTML Radio buttons in a form usually have the same name property, and all Getelementsbyname () methods return an array of elements, not an element
Syntax: document.getelementsbyname (name);

getElementsByTagName () returns a collection of objects with the specified label name, in the order they are in the document, and if the special string "*" is passed to the getElementsByTagName () method, it returns a list of all the elements in the document. The order in which elements are arranged is the order in which they are in the document
Grammar: document.getElementsByTagName (tagname);

Open () opens a new document, erases the contents of the current HTML document, writes the new document with the Write () method or the Writeln () method, calls the open () method to open a new document, and after setting the contents of the document with the Write () method, you must remember to close the document with the and force its contents to show up
Grammar: Document.open (mimetype,replace); MimeType Optionally, specify the type of document being written, the default is "text/html", and replace is optional, which, when set, can cause new documents to inherit historical entries from the parent document (a little confused, you know?) )

Write () writes HTML expressions or JavaScript code to the document, parameters (Exp1,exp2,exp3,...), which are appended sequentially to the document, and we usually use the write () method in two ways: the first is to use the party to output HTML in the document , the other is to create a new document in a window outside the window that calls the method, and in the second case, be sure to use the close () method to turn the document off
Grammar: document.write (Exp1,exp2,exp3,....);

The Writeln () method works the same way as the write () method, plus you can write a newline character after each expression, which is useful when writing <pre> markup content
Grammar: Document.writeln (Exp1,exp2,exp3,....);


Common Object Methods


document.write ()///write content dynamically to page
Document.createelement (tag)//Create an HTML tag object
document.getElementById (ID)//Get object with specified ID value
Document.getelementsbyname (name)//Get object with specified Name value
Document.body.appendChild (Otag)
———————————————————————


body-the principal child object


Document.body//Specifies that the start and end of the document body is equivalent to body>/body>
Document.body.bgColor//Sets or gets the background color behind the object
Document.body.link//not-clicked link color
Document.body.alink//Activate the color of the link (focus on this link)
Document.body.vlink//clicked on link color
Document.body.text//Text color
Document.body.innerText//Set the text between body>.../body>
Document.body.innerHTML//Set of HTML code between body>.../body>
Document.body.topMargin//page top margin
Document.body.leftMargin//Page left margin
Document.body.rightMargin//Page right margin
Document.body.bottomMargin//Page Bottom margin
Document.body.background//Background picture
Document.body.appendChild (Otag)//dynamically generate an HTML object


Common Object Events


Document.body.onclick= "func ()"//mouse pointer Click object is triggered
Document.body.onmouseover= when the "func ()"//mouse pointer moves over an object
Trigger when document.body.onmouseout= "func ()"//mouse pointer moves out of an object
———————————————————————
location-Position child Object


Document.location.hash//#号后的部分
Document.location.host//domain + port number as if the host name localhost returned, no return port number
Document.location.hostname//Domain
Document.location.href//Full URL
Document.location.pathname//directory section
Document.location.port//Port number
Document.location.protocol//Network Protocol (http:)
Document.location.search//number of parts after
Documeny.location.reload ()//Refresh Page
Document.location.reload (URL)//Open new page
Document.location.assign (URL)//Open new page
Document.location.replace (URL)//Open new page

———————————————————————

selection-Selection Child Objects
Document.selection


For example:


<div> Please select some of the text here. </div>
<div><input type= "button" value= "Please select some text and click here to execute empty" onclick= "Javascript:foo ();"/></div>
<script type= "Text/javascript" language= "JavaScript" >
<!–
function Foo ()
{
Document.selection.empty ();
}
–>
</script>


The Createrange method of selection

Document.selection.createRange () returns the TextRange object based on the current text selection, or returns the Controlrange object based on the control selection.

With execcommand, it is useful in the HTML editor, such as: Text bold, italic, copy, paste, create hyperlinks, and so on.

All of these seem to be implemented only under IE.


———————————————————————


Images collection (image on page)


A) by reference to the collection
Document.images//the IMG tag on the corresponding page
Document.images.length//The number of IMG tags on the page
Document.images[0]//1th img Tag
Document.images[i]//i-1 img Tags


b) Direct reference through the Name property
IMG name= "Oimage"
Document.images.oImage//document.images.name Properties


c) referencing the SRC attribute of a picture
Document.images.oImage.src//document.images.name properties. src


d) Create an image
var oimage
Oimage = new Image ()
Document.images.oimage.src= "1.jpg"
Also create an IMG/tag on the page to show


———————————————————————-


Forms collection (Forms on page)


A) by reference to the collection
Document.forms//corresponding form labels on the page
Number of/formform labels on the document.forms.length//corresponding page
Document.forms[0]//1th/formform label
Document.forms[i]//i-1/formform label
Number of controls in Document.forms[i].length//I-1/formform
DOCUMENT.FORMS[I].ELEMENTS[J]//i-1 j-1 controls in/formform


b) direct reference through the label Name property
/formform name= "Myform" >input name= "Myctrl"/>/form
Document. Myform.myctrl//document. Table Single-name. Control Name


c) Accessing the properties of the form
Document.forms[i].name//Corresponding Form Name> property
Document.forms[i].action//Correspondence/formform action> Properties
Document.forms[i].encoding//Correspondence/formform enctype> Properties
Document.forms[i].target//Correspondence/formform target> Properties


Document.forms[i].appendchild (Otag)//Insert a control dynamically
DOCUMENT.ALL.ODIV//reference layer Odiv
Document.all.odiv.style.display= ""//Layer set to Visual
Document.all.odiv.style.display= "None"//layer set to hidden
Document.getelementid ("Odiv")//Reference object by Getelementid
Document.getelementid ("Odiv"). style= ""
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 a Layer object
document.getElementById ("ID"). innertext//Dynamic output text
document.getElementById ("ID"). InnerHTML//Dynamic output HTML
document.getElementById ("ID"). Outertext//InnerText
document.getElementById ("ID"). outerHTML//innerHTML

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.