directory
Document Object Overview
Common properties, methods, and events for document objects
Property of the document object
Method of the Document object
Event of the document object
Document object application
View document creation date, modification date, and document size
The fileCreatedDate property is used to obtain the creation date of the document.
(2) fileModifiedDate property fileModifiedDate property is used to obtain the last modified date of the document.
The lastModified attribute is used to obtain the time when the document was lastModified.
The fileSize attribute is used to obtain the size of the document.
Examples: View document creation date, modification date, and document size
Dynamic title bar
Gets and sets the URL
Gets the current state of the object
Example: Get the current state of an object
Document Object Overview
The document object (Document) represents the document in the browser window and is a child of the Window object. Since the Window object is the default object in the DOM object model, methods and children in the Window object do not need to be referenced using window. The Document object allows you to access any HTML markup contained in an HTML document and dynamically change the content of the HTML markup, such as forms, images, tables, and hyperlinks. This object has been around since version 1.0 of JavaScript, and several properties and methods have been added in subsequent versions.
The Document object hierarchy is shown below.
Common properties, methods, and events for document objects
Property of the document object
| attribute | instructions |
|---|---|
| alinkColor | The color of the hyperlink text, corresponding to the Alink attribute in the tag |
| all[ ] | An array that stores HTML tags (the property is itself an object) |
| anchors[ ] | An array of anchors (the property is itself an object) |
| bgColor | Document background color |
| cookie | Represents the value of the cookie |
| fgColor | The text color of the civilization (without hyperlinked text) corresponds to the text attribute in the tag |
| forms[ ] | Stores an array of form objects (the property is itself an object) |
| fileCreateDate | The date the document was created |
| fileModifiedDate | The last modification date of the document |
| fileSize | Size of the current file |
| lastModified | When the document was last modified |
| images[ ] | An array that stores image objects (the property is itself an object) |
| linkColor | The color of the unaccessed hyperlink text that corresponds to the link attribute in the tag |
| links[ ] | Stores an array of link objects (the property is itself an object) |
| vlinkColor | Represents the color of the accessed hyperlink text, corresponding to the vlink attribute of the tag |
| title | Current document title object |
| body | Current document body object |
| readyState | Gets the current state of an object |
| URL | Gets or sets the URL |
Method of the Document object
| methods | instructions |
|---|---|
| close | The output stream of the document |
| open | Open a document output stream and receive the create page contents of the write() and writeln() methods |
| write | Write HTML or JavaScript statements to a document |
| writeln | Write an HTML or JavaScript statement to the document, ending with a newline character |
| createElement | Creates a specified HTML tag |
| getElementById | Gets the HTML tag with the specified ID |
Event of the document object
Most browser internal objects have many events, and the following table shows the common events and when they are triggered.
| The event | When the trigger |
|---|---|
| onabort | Triggered when object loading is interrupted |
| onblur | Triggered when the element or window itself loses focus |
| onchange | Triggered when changing an option in a select element or another form element loses focus and its contents have changed since it got focus |
| onclick | Triggered when you click. This event is also emitted when the cursor focus is on the button and the Enter key is pressed |
| ondblclick | Trigger on double click |
| onerror | Triggered when an error occurs |
| onfocus | Triggered when any element or window itself gets focus |
| onkeydown | A key (Shift or Alt) on the keyboard is triggered when it is moved down, or repeatedly when a key is held down. When false is returned, the default action is cancelled |
| onkeypress | Occurs when a key on the keyboard is pressed and produces a character. That is, it does not trigger when a key such as Shift or Alt is pressed. If you keep pressing a key, it will keep triggering. When false is returned, the default action is cancelled |
| onkeyup | Triggered when releasing keys on the keyboard |
| onload | Fires on the Window object when the page is fully loaded; Trigger on frameset after all frames are loaded: Trigger on the image specified by the tag after it is fully loaded; Or when the specified object is fully loaded |
| onmousedown | Triggered when any mouse key is clicked |
| onmousemove | Fires continuously as the mouse pointer moves over an element |
| onmouseout | Triggered when the mouse pointer is removed from the specified element |
| onmouseover | Triggered when the mouse pointer is moved over an element |
| onmouseup | Triggered when any mouse button is released |
| onreset | Click the reset button when inOn the trigger |
| onresize | Triggered when the size of a window or frame changes |
| onscroll | Triggered when scrolling on any element or window with a scrollbar |
| onselect | Triggered when text is selected |
| onsubmit | When the submit button is clicked on |
| onunload | Fires on the Window object after the page is completely unmounted; Or it can be triggered on a frameset after all frameworks are uninstalled |
Document object application
View document creation date, modification date, and document size
To view the document creation date, modification date, and document size, you can use the fileCreatedDate, fileModifiedDate, lastModified, and fileSize properties.
The fileCreatedDate property is used to obtain the creation date of the document.
Grammar:
[date=]fileCreatedDate
Parameter Description:
Date: Optional. String variable used to store the creation date of the document.
(2) fileModifiedDate propertiesThe fileModifiedDate property is used to get the date when the document was last modified.
Grammar:
[date=]ileModifiedDate
The lastModified attribute is used to obtain the time when the document was lastModified.
Grammar:
[date=]lastModified
Parameter Description:
Date: Optional. A string variable used to store when the document was last modified.
The fileSize attribute is used to obtain the size of the document.
Grammar:
[size=]fileSize
Parameter Description:
Size: Optional. String variable used to store document size
Examples: View document creation date, modification date, and document size
<! DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>View file creation date, modification date, and document size</p>
<br />
<script>
document.write(" This document was created on: "+document.fileCreatedDate+"<br />");
document.write(" This document was modified at: "+document.fileModifiedDate+"<br />");
document.write(" This document is modified at: "+document.lastModified+"<br />");
document.write(" This document size: "+document.fileSize+"<br />");
</script>
</body>
</html>
Copy the code
Dynamic title bar
Setting the dynamic title bar can be done using the title property. This property gets or sets the title of the document.
Grammar:
[Title=]document.title[=setTitle]
Parameter Description:
Title: Optional string variable used to store the Title of the document
SetTitle: Optional. Set the title of the document
Example: When browsing the web, it is common to see some information flashing or changing in the title bar of Internet Explorer.
<! DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p></p>
<br />
<script>
var n=0;
function title(){
n++;
if(n==4) n=1;
if(n==1) document.title='(-) -)';
if(n==2) document.title='(^. ^);
if(n==3) document.title='(~. ~);
setTimeout("title()".1000);
}
title();
</script>
</body>
</html>
Copy the code
Gets and sets the URL
Getting and setting urls can be done primarily using URL properties. This property is used to get or set the URL of the current document.
Grammar:
[url=]document.URL[=setUrl]
Parameter Description:
Url: Optional. String expression used to store the URL of the current document.
SetUrl: Optional. String variable used to set the URL of the current document.
Example: Get and set the URL
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
document.write(" Current page URL: "+document.URL);
function seturl(){
document.URL=t;
var u=document.URL;
return u;
}
</script>
<p>Go to the page URL you want to jump to:<input name="name" type="text" />
<input name="input" value="Jump" onclick="seturl(name.value)" type="button" />
</p>
</body>
</html>
Copy the code
Gets the current state of the object
Getting the current state of an object in a document can be done using the readyState property.
Grammar:
[state=]obj.readyState
Status value and description
| The status bar | instructions |
|---|---|
| loading | Indicates that the object is loading data |
| loaded | Indicates that the object has finished loading data |
| interactive | Users can interact with the object, whether it has been loaded or not |
| complete | The object is initialized |
Example: Get the current state of an object
<! DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script></script>
</body>
</html>
Copy the code