Basic knowledge of Document attributes and methods in javascript

Source: Internet
Author: User
JS Document attributes and methods. I hope you can understand them to facilitate future application development. Document. title // set the document title 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. charset // set the character set to simplified Chinese: gb2312
Document. fileSize // file size, read-only attribute
Document. cookie // set and read cookies

-----------------------
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 body>... /Body> text
Document. body. innerHTML // set body>... HTML code between/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 the object
-----------------------
Location-location sub-Object

Part after document. location. hash // #
Document. location. host // domain name + port number // it seems that the returned host name is localhost, and no port number is returned
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

For example:

Select some text here.



<script type="text/javascript" language="javascript">




CreateRange method of selection

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

ExecCommand can be used in HTML editors, such as bold text, italic text, copying, pasting, and hyperlink creation.

These seem to be implemented only in IE ..

-----------------------

Images set (images in the page)

A) reference through a set
Document. images // the img tag on the corresponding page
Document. images. length // Number of img labels on the page
Document. images [0] // 1st img tags
Document. images [I] // I-1 img tag

B) direct reference through the name attribute
Img name = "oImage"
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.src000000001.jpg"
At the same time, you can create an img/tag on the page to display it.

------------------------

Forms set (forms in the page)

A) reference through a set
Document. forms // form tag on the corresponding page
Document. forms. length // Number of/formform labels on the page
Document. forms [0] // 1st/formform labels
Document. forms [I] // The I-1/formform tag
Document. forms [I]. length // number of controls in the I-1/formform
Document. forms [I]. elements [j] // The I-1 control in the J-1/formform

B) direct reference through the label name attribute
/Formform name = "Myform"> input name = "myctrl"/>/form
Document. Myform. myctrl // document. form name. Control name

C) Access Form attributes
Document. forms [I]. name // corresponding form name> attribute
Document. forms [I]. action // corresponding/formform action> attribute
Document. forms [I]. encoding // corresponding/formform enctype> attribute
Document.formspolici2.16.tar get // corresponding/formform target> attribute

Document. forms [I]. appendChild (oTag) // dynamically insert a control
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

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.