A few usage summaries of js page elements

  • 2020-03-29 23:48:52
  • OfStack

Object properties

Document.title // sets the document title to be equivalent to the HTML title tag
Document.bgcolor // sets the background color of the page
Document.fgcolor // sets the foreground color (text color)
Document.linkcolor // unclicked linkColor
Document.alinkcolor // activates the color of the link where the focus is
Document.vlinkcolor // link color already clicked
Document.url // sets the URL property to open another page in the same window
Document.filecreateddate // file creates a date, read-only property
Document. FileModifiedDate / / file modification date, read-only property
Document.charset // set character set (simplified Chinese) :gb2312
Document.filesize // fileSize, read-only property
Document.cookie // sets and reads cookies

-- -- -- -- -- -- -- -- -- -- -- -
Common object methods

Document.write () // dynamically writes to the page
Document.createelement (Tag) // creates an HTML Tag object
Document.getelementbyid (ID) // gets the object with the specified ID value
Document. GetElementsByName (Name) / / get the object of the specified Name value
Document. The body. The appendChild (oTag)
-- -- -- -- -- -- -- -- -- -- -- -

Body - the body child object

Document.body // specifies the beginning and end of the body of the document to be equivalent to body> / body>
Document.body.bgcolor // sets or gets the background color behind the object
Document.body. link // unclicked link color
Document.body.alink // activate the color of the link where the focus is
Document.body.vlink // link color already clicked
Document.body.text // text
Document.body.innertext // set body> ... / body> Text between
Document.body.innerhtml // sets body> ... / body> Between the HTML code
Document.body.topmargin // page topMargin
Document.body.leftmargin // page leftMargin
Document. The body. The right margin rightMargin / / page
Document. The body. The bottom margin bottomMargin / / page
Document.body.background // background image
Document. The body. The appendChild (oTag) / / dynamically generates an HTML objects

Common object events

Document.body.onclick = "func()" // the click object is triggered
Document. The body. The onmouseover = "func ()" / / triggered when the mouse pointer to the object
Document.body.onmouseout = "func()" // triggered when the mouse pointer moves out of the object
-- -- -- -- -- -- -- -- -- -- -- -
Location - location child object

Document.location.hash // after the # sign
Document.location.host // domain name + port number // appears to return the hostname localhost, not the port number
Document. The location. The hostname / / domain name
Document.location.href // full URL
Document. The location. The pathname/part/directory
Document.location.port // port number
Document. The location. Protocol/Internet protocol (HTTP)
Document. The location. The search / /? After the number
Documeny.location.reload () // refresh the page
Document.location.reload (URL) // opens a new web page
Document.location.assign (URL) // open a new web page
Document. The location. The replace (URL) / / open a new page
-- -- -- -- -- -- -- -- -- -- -- -
Selection - selects a child object
Document. The selection

Such as:


<div> Please select some 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 for selection

Document. Selection. CreateRange () according to the current text choose return TextRange object, or choose return ControlRange according to control objects.

Working with execCommand is useful in HTML editors, such as bold text, italics, copy, paste, create hyperlinks, and so on.

These e seem to be only under IE to achieve.

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

Collection of images

A) through a collection reference
Document.images // corresponds to the img tag on the page
Document.images.length // corresponds to the number of img tags on the page
Document.images [0] // the first img tag
Document.images [I] // the i-1st img tag

B) direct reference through the name attribute
Img oImage name = ""
Document. Images. OImage. / / the document images. The name attribute

C) refer to the SRC attribute of the image
. The document images. OImage. SRC / / document images. The name attribute. The SRC

D) create an image
Var oImage
OImage = new Image ()
. The document images. OImage. SRC = "1. JPG"
At the same time, create an img/TAB on the page to correspond to it

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

Forms collection (forms on a page)

A) through a collection reference
Document.forms // corresponds to the form tag on the page
Document.forms.length // corresponds to the number of /formform tags on the page
Document.forms [0] // the first /formform tag
Document.forms [I] // the i-1st /formform tag
Document.forms [I].length // the number of controls in the i-1st /formform
Document.forms [I]. Elements [j] // the i-1st/the j-1st control in the formform

B) directly referenced by the tag name attribute
/ formform name = "Myform" > The 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 // corresponding /formform action> attribute
Document.forms [I]. Encoding // corresponding /formform enctype> attribute
Document.forms [I]. Target // corresponding /formform target> attribute

Document.forms [I].appendchild (oTag) // dynamically inserts a control
Document.all.odiv // refers to the layer oDiv
Document. All. ODiv. Style. The display = "" / / layer is set to visible
Document. All. ODiv. Style. The display = "none" / / layer is set to hidden
Document.getelementid (" oDiv ") // references objects through getElementId
Document. GetElementId oDiv (" "). The style = ""
Document. GetElementId oDiv (" "). The display = "none"

4 properties of the layer object
Document.getelementbyid (" ID ").innertext // dynamic output text
Document.getelementbyid (" ID ").innerhtml // dynamic output HTML
Document. The getElementById (" ID "). The innerText outerText / /
Document. GetElementById (" ID "). The innerHTML outerHTML / /


Related articles: