Summary of several usages of js page elements_javascript skills

Object properties

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 to open another web page in the same window
document.fileCreatedDate //File creation date, read-only attribute
document.fileModifiedDate //File modified date, read-only attribute
document.charset //Set Character set Simplified Chinese: gb2312
document.fileSize //File size, read-only attribute
document.cookie //Set and read cookie

————————————————————————
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 which is equivalent to body>/body>
document.body.bgColor //Set or get the background color behind the object
document.body.link / /Color of links that have not been clicked
document.body.alink //Color of active links (focus is on this link)
document.body.vlink //Color of links that have been clicked
document.body .text //Text color
document.body.innerText //Set the text between body>.../body>
document.body.innerHTML //Set the HTML code between body>.../body>
document.body.topMargin //Top margin of page
document.body.leftMargin //Left margin of page
document.body.rightMargin //Right margin of page
document.body.bottomMargin //Bottom margin of page Distance
document.body.background //Background image
document.body.appendChild(oTag) //Dynamicly generate an HTML object

Common object events

document.body.onclick=”func()” //Triggered when the mouse pointer clicks on the object
document.body.onmouseover=”func()” //Triggered when the mouse pointer moves to the object
document .body.onmouseout=”func()” //Triggered when the mouse pointer moves out of the object
——————————————————————
location-location sub-object

document.location.hash // The part after #
document.location.host // Domain name 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 // The part after ?
documenty.location.reload() //Refresh the web page
document.location.reload(URL) //Open a new one Web page
document.location.assign(URL) //Open a new web page
document.location.replace(URL) //Open a new web page
———————————— ————————————
selection-selection sub-object
document.selection

For example:

Copy code The code is as follows:

< ;div>Please select part of the text here.

createRange method of 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 bolding text, italics, copying, pasting, creating 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] / /The 1st img tag
document.images[i] //The i-1st img tag

b) Directly reference
img name="oImage" through the name attribute
document.images.oImage //document.images.name attribute

c) Reference 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 / on the page The tag corresponding to it can be displayed

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

forms collection (forms on 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] //1st/formform tag
document.forms[i] //i-1st/formform tag
document.forms[i].length //Controls in i-1st/formform Number
document.forms[i].elements[j] //The i-1st/j-1st control in formform

b) Directly reference
/formform name=”Myform”>input name=”myctrl”/>/form
document.Myform.myctrl //document.form name.control through the label name attribute First name

c) Access the properties of the form
document.forms[i].name //corresponds to form name>property
document.forms[i].action //corresponds to/formform action>property
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=”” / /The layer is set to be visible
document.all.oDiv.style.display=”none” //The layer is set to be hidden
document.getElementId(”oDiv”) //The object is referenced through getElementId
document.getElementId("oDiv").
document.getElementId("oDiv").display="none"
/*document.all represents the collection of all objects in the document
only ie This attribute is supported, so it is also used to determine the type of browser*/

Four properties of the layer object
document.getElementById("ID").innerText //Dynamic output text
document.getElementById("ID").innerHTML //Dynamic output of HTML
document .getElementById("ID").outerText //Same as innerText
document.getElementById("ID").outerHTML //Same as innerHTML