Comments: Today's content is about how to operate document objects. Some new users may be unfamiliar with this. Next, this article will introduce in detail, if you are interested, you can learn that today's content is about how to operate document objects.
1. Operate Document Metadata
First, let's look at the relevant attributes:
CharacterSet: gets the encoding method of the current document. This attribute is read-only;
Charset: gets or sets the encoding method of the current document;
CompatMode: gets the compatibility mode of the current document;
Cookie: Get or set the cookie object of the current document;
DefaultCharset: gets the default encoding method of the browser;
DefaultView: obtains the window object of the current document;
Dir: Get or set the text alignment of the current document;
Domain: Get or set the domian value of the current document;
Implementation: Provides information about supported dom features;
LastModified: Get the last modification time of the document (if there is no last modification time, the current time is returned );
Location: provides the url Information of the current document;
ReadyState: returns the status of the current document. This attribute is read-only;
Referrer: returns the url of the document connected to the current document;
Title: gets or sets the title of the current document.
Let's look at the following example:
The Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Title> example </title>
</Head>
<Body>
<Script type = "text/javascript">
Document. writeln ('<pre> ');
Document. writeln ('characterset: '+ document. characterSet );
Document. writeln ('charset: '+ document. charset );
Document. writeln ('compatmode: '+ document. compatMode );
Document. writeln ('defaultcharset: '+ document. defaultCharset );
Document. writeln ('dir: '+ document. dir );
Document. writeln ('domain: '+ document. domain );
Document. writeln ('lastmodified: '+ document. lastModified );
Document. writeln ('referrer: '+ document. referrer );
Document. writeln ('title: '+ document. title );
Document. write ('</pre> ');
</Script>
</Body>
</Html>
Results (different browsers may display different results ):
2. How to understand the compatibility mode
The compatMode attribute tells you how the browser processes the current document. There are too many non-standard html pages, and the browser will try to display these pages even if they do not comply with the html specifications. Some content depends on the unique characteristics of earlier browsers in the world of war, and these attribute stones do not comply with the specifications. CompatMode returns one or two values, as follows:
CSS1Compat: document complies with a valid html specification (not necessarily html5, this value is also returned on the verified html4 page );
BackCompat: document contains non-compliant features, triggering the compatibility mode.
3. Use Location object
Document. location returns a Location object that provides you with fine-grained document address information and allows you to navigate to other documents.
Protocol: gets or sets the document url protocol;
Host: obtains or sets the host information of the document url;
Href: obtains or sets the document address;
Hostname: Get or set the document host name;
Search: Get or set the information in the document url query section;
Hash: obtains or sets the information in the hash part of the document url;
Assign (<url>): navigate to a specified url;
Replace (<url>): remove the current document and navigate to the specified url;
Reload (): reload the current document;
ResolveURL (<url>): changes the relative path to the absolute path.
Let's take a look at the example below:
The 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> </title>
</Head>
<Body>
<Script type = "text/javascript">
Document. writeln ('<pre> ');
Document. writeln ('Protocol: '+ document. location. protocol );
Document. writeln ('host: '+ document. location. host );
Document. writeln ('hostname: '+ document. location. hostname );
Document. writeln ('port: '+ document. location. port );
Document. writeln ('pathname: '+ document. location. pathname );
Document. writeln ('search: '+ document. location. search );
Document. writeln ('hash: '+ document. location. hash );
Document. writeln ('</pre> ');
</Script>
</Body>
</Html>
Result:
4. Read and Write cookies
The cookie attribute allows you to add, modify, and read cookies of a document. For example:
The Code is as follows:
<! Doctype html>
<Html>
<Head>
<Title> Example </title>
<Meta name = "author" content = "Adam Freeman"/>
<Meta name = "description" content = "A simple example"/>
</Head>
<Body>
<P id = "cookiedata">
</P>
<Button id = "write">
Add Cookie </button>
<Button id = "update">
Update Cookie </button>
<Button id = "clear">
Clear Cookie </button>
<Script type = "text/javascript">
Var cookieCount = 0;
Document. getElementById ('update'). onclick = updateCookie;
Document. getElementById ('write'). onclick = createCookie;
Document. getElementById ('clear'). onclick = clearCookie;
ReadCookies ();
Function readCookies (){
Document. getElementById ('cookiedata'). innerHTML =! Document. cookie? '': Document. cookie;
}
Function updateCookie (){
Document. cookie = 'cookie _ '+ cookieCount +' = update _ '+ cookieCount;
ReadCookies ();
}
Function createCookie (){
CookieCount ++;
Document. cookie = 'cookie _ '+ cookieCount +' = value _ '+ cookieCount;
ReadCookies ();
}
Function clearCookie (){
Var exp = new Date ();
Exp. setTime (exp. getTime ()-1 );
Var arrStr = document. cookie. split (";");
For (var I = 0; I <arrStr. length; I ++ ){
Var temp = arrStr [I]. split ("= ");
If (temp [0]) {
Document. cookie = temp [0] + "=; expires =" + exp. toGMTString ();
};
}
CookieCount = 0;
ReadCookies ();
}
</Script>
</Body>
</Html>
Result:
5. Understand ReadyState
Document. readyState helps you understand the current status of the page during page loading and parsing. Remember that the browser will immediately execute the script when it encounters a script element, unless you use the defer attribute to delay the execution of the script. Three values of readyState indicate different states.
Loading: the browser is loading and executing the document;
Interactive: docuent has completed parsing, but the browser is loading other external resources (media, images, etc );
Complete: page resolution is complete, and external resources are completed at home.
During the entire loading and parsing process of the browser, the value of readyState changes one by one from loading, interactive, and complete. When combined with the readystatechange event (triggered when the readyState state changes), readyState will become quite valuable.
The Code is as follows:
<! Doctype html>
<Html>
<Head>
<Title> Example </title>
<Meta name = "author" content = "Adam Freeman"/>
<Meta name = "description" content = "A simple example"/>
<Script>
Document. onreadystatechange = function (){
If (document. readyState = "interactive "){
Document. getElementById ("pressme"). onclick = function (){
Document. getElementById ("results"). innerHTML = "Button Pressed ";
}
}
}
</Script>
</Head>
<Body>
<Button id = "pressme">
Press Me </button>
<Pre id = "results"> </pre>
</Body>
</Html>
The code above uses the readystatechange event to achieve delayed execution. The value of readystate will change to interactive only when the entire page is parsed and exposed, and then the click event will be bound to the pressme button. This operation ensures that all the required html elements exist and prevents errors.
6. Get information about dom attribute implementation
The document. implementation attribute helps you understand how the browser implements dom attributes. This property returns the DOMImplementation object, which contains the hasFeature method. You can use this method to understand the browser's implementation of a property.
The Code is as follows:
<! Doctype html>
<Html>
<Head>
<Title> Example </title>
<Meta name = "author" content = "Adam Freeman"/>
<Meta name = "description" content = "A simple example"/>
</Head>
<Body>
<Script>
Var features = ["Core", "HTML", "CSS", "Selectors-API"];
Var levels = ["1.0", "2.0", "3.0"];
Document. writeln ("<pre> ");
For (var I = 0; I <features. length; I ++ ){
Document. writeln ("Checking for feature:" + features [I]);
For (var j = 0; j <levels. length; j ++ ){
Document. write (features [I] + "Level" + levels [j] + ":");
Document. writeln (document. implementation. hasFeature (features [I], levels [j]);
}
}
Document. write ("</pre> ")
</Script>
</Body>
</Html>
Effect:
