Summary of Document attributes and methods in JS

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:
Copy codeThe Code is as follows:
<Div> select some text here. </Div>
<Div> <input type = "button" value = "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>


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

Certificate ------------------------------------------------------------------------------------------------------------------------------------------------------------------
Document. readyState: determines whether the document has been loaded. Not supported by firefox.

This attribute is read-only and the returned value may be:

0-UNINITIALIZED: XML objects are generated, but no files are loaded.
1-LOADING: The LOADING program is in progress, but the file has not 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 some loaded files. In this case, the object model is valid but read-only.
4-COMPLETED: the file is fully loaded, indicating that the file is successfully loaded.
Copy codeThe Code is as follows:
Document. onreadystatechange = subSomething; // This method is executed when the page loading status changes.
Function subSomething ()
{
If (document. readyState = "complete") {// when the page loading status is complete
// The operation you want to perform.
}
Else if (document. readyState = "loading "){
}
}

Better example: http://www.jb51.net/article/20445.htm

Note: The onreadystatechange event can identify changes to the readyState attribute.

Document. all (only supported by IE)

Action: document. layers is Netscape 4. x proprietary attributes, it is an array that represents all elements that are stored, such as <div> <layer>, and so on. It is usually referenced by the id attribute of the <div> or <layer> object, however, this does not contain any other elements.

Document. layers and document. all have the same usage and functions. Here I will only introduce one usage:
Document. all indicates all elements of the document, that is, it contains all elements of the current webpage. It stores the attributes of an element in an array, so we can use document. all ["element name"]. attribute name = "attribute value" to dynamically change the attributes of an element. With this statement, you can make a lot of dynamic web page effects, such: it dynamically changes the image, text background, webpage background, image size, and text color. You can control all web page elements dynamically.
Document. all [] This array can access all elements in the document.

Example 1 (this helps you understand what objects are in the document)
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN"
Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> Document. All Example </title>
<Meta http-equiv = "content-type" content = "text/html; charset = ISO-8859-1"/>
</Head>
<Body>
<H1> Example Heading <Hr/>
<P> This is a <em> paragraph </em>. It is only a <em> paragraph. </em> </p>
<P> Yet another <em> paragraph. </em> </p>
<P> This final <em> paragraph </em> has <em id = "special"> special emphasis. </em> </p>
<Hr/>
<Script type = "text/javascript">
<! --
Var I, origLength;
OrigLength = document. all. length;
Document. write ('document. all. length = '+ origLength + "<br/> ");
For (I = 0; I <origLength; I ++)
{
Document. write ("document. all [" + I + "] =" + document. all [I]. tagName + "<br/> ");
}
// -->
</Script>
</Body>
</Html>

The execution result is:
Example Heading

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

This is a paragraph. It is only a paragraph.
Yet another paragraph.
This final paragraph has special emphasis.

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

Document. all. length = 18
Document. all [0] =!
Document. all [1] = HTML
Document. all [2] = HEAD
Document. all [3] = TITLE
Document. all [4] = META
Document. all [5] = BODY
Document. all [6] = H1
Document. all [7] = HR
Document. all [8] = P
Document. all [9] = EM
Document. all [10] = EM
Document. all [11] = P
Document. all [12] = EM
Document. all [13] = P
Document. all [14] = EM
Document. all [15] = EM
Document. all [16] = HR
Document. all [17] = SCRIPT
(Note that it can only run on IE)
Copy codeThe Code is as follows:
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312">
<Title> click DIV color change </title>
<Style type = "text/css">
<! --
# Docid {
Height: 400px;
Width: 400px;
Background-color: #999 ;}
-->
</Style>
</Head>
<Body> <div id = "docid" name = "docname" onClick = "bgcolor ()"> </div>
</Body>
</Html>
<Script language = "javascript" type = "text/javascript">
<! --
Function bgcolor (){
Document. all [7]. style. backgroundColor = "#000"
}
-->
</Script>

The above example shows you how to access a specific element in the document. For example, the document contains a DIV
<Div id = "docid" name = "docname"> </div>:
Document. all ["docid"]
Document. all ["docname"]
Document. all. item ("docid ")
Document. all. item ("docname ")
Document. all [7]
Document. all. tags ("div") returns all DIV arrays in the document. In this example, there is only one DIV, so document. all. tags ("div") [0] can be accessed.

3. Use document. all []
Example 3
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN"
Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> Document. All Example #2 </title>
<Meta http-equiv = "content-type" content = "text/html; charset = ISO-8859-1"/>
</Head>
<Body>
<! -- Works in Internet Explorer and compatible -->
<H1 id = "heading1" align = "center" style = "font-size: larger;"> DHTML Fun !!! </H1>
<Form name = "testform" id = "testform" action = "#" method = "get">
<Br/>
<Input type = "button" value = "Align Left"
Onclick = "document. all ['heading1']. align = 'left'; "/> // change the value of the align attribute in the

<Input type = "button" value = "Align Center"
Onclick = "document. all ['heading1']. align = 'center';"/>
<Input type = "button" value = "Align Right"
Onclick = "document. all ['heading1']. align = 'right';"/>
<Br/>
<Input type = "button" value = "Bigger"
Onclick = "document. all ['heading1']. style. fontSize = 'xx-large ';"/>
<Input type = "button" value = "Smaller"
Onclick = "document. all ['heading1']. style. fontSize = 'xx-small';"/>
<Br/>
<Input type = "button" value = "Red"
Onclick = "document. all ['heading1']. style. color = 'red';"/>
<Input type = "button" value = "Blue"
Onclick = "document. all ['heading1']. style. color = 'blue';"/>
<Input type = "button" value = "Black"
Onclick = "document. all ['heading1']. style. color = 'black';"/>
<Br/>
<Input type = "text" name = "userText" id = "userText" size = "30"/>
<Input type = "button" value = "Change Text"
Onclick = "document. all ['heading1']. innerText = document. testform. userText. value; "/& gt; // change the text content in the </Form>
</Body>
</Html>