HTML5 Guide (2) - Detailed introduction to operating Document metadata-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

HTML5 Guide (2) - Detailed introduction to operating Document metadata

黄舟

Mar 22, 2017 pm 04:01 PM

Today’s content is about how to operate document object.

　1. Manipulate Document Metadata

First let’s take a look at the relevant attributes:

characterSet: Get the encoding method of the current document. This attribute is Read-only;

charset: Get or set the encoding mode of the current document;

compatMode: Get the compatibility mode of the current document;

cookie: Get or set the cookie of the current document Object;

defaultCharset: Get the browser's default encoding method;

defaultView: Get the window object of the current document;

dir: Get or set the text alignment of the current document Method;

domain: Get or set the domian value of the current document;

implementation: Provide 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 property is a read-only property;

referrer: Returns the document url information connected to the current document;

title: Gets or sets the title of the current document.

Let’s look at the following example:

<!DOCTYPE html>
<html>
<head>
    <title>example</title>
</head>
<body>
    <script type="text/javascript">
        document.writeln(&#39;<pre class="brush:php;toolbar:false">&#39;);

        document.writeln(&#39;characterSet:&#39; + document.characterSet);
        document.writeln(&#39;charset:&#39; + document.charset);
        document.writeln(&#39;compatMode:&#39; + document.compatMode);
        document.writeln(&#39;defaultCharset:&#39; + document.defaultCharset);
        document.writeln(&#39;dir:&#39; + document.dir);
        document.writeln(&#39;domain:&#39; + document.domain);
        document.writeln(&#39;lastModified:&#39; + document.lastModified);
        document.writeln(&#39;referrer:&#39; + document.referrer);
        document.writeln(&#39;title:&#39; + document.title);

        document.write(&#39;

');

Copy after login

Result (the results displayed by different browsers may be different):

2. How to understand the compatibility mode

The compatMode attribute tells you how the browser handles the current document. There is so much non-standard HTML out there that browsers will try to display these pages even though they don't conform to the HTML specification. Some content relies on unique features that existed during the early days of the browser wars, and these properties are not spec-compliant. compatMode will return one or two values, as follows:

CSS1Compat: The document conforms to a valid html specification (not necessarily

html5, the verified html4 page also returns this value);

BackCompat: The document contains features that do not comply with the specification, triggering compatibility mode.

3. Use the Location object

Document.location returns a Location object, providing you with fine-grained address information of the document and allowing you to navigate to other documents.

protocol: Get or set the protocol of the document url;

host: Get or set the host information of the document url;

href: Get or set the address information of the document;

hostname: Get or set the host name of the document;

search: Get or set the information in the query part of the document url;

hash: Get or set the information in the hash part of the document url ;

assign(): Navigate to a specified url;

replace(): Remove the current document and navigate to the specified url;

reload(): Reload the current document;

resolveURL(): Change the relative path to an absolute path.

Look at the following example:

<!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(&#39;<pre class="brush:php;toolbar:false">&#39;);

        document.writeln(&#39;protocol:&#39; + document.location.protocol);
        document.writeln(&#39;host:&#39; + document.location.host);
        document.writeln(&#39;hostname:&#39; + document.location.hostname);
        document.writeln(&#39;port:&#39; + document.location.port);
        document.writeln(&#39;pathname:&#39; + document.location.pathname);
        document.writeln(&#39;search:&#39; + document.location.search);
        document.writeln(&#39;hash:&#39; + document.location.hash);

        document.writeln(&#39;

');

Copy after login

Result:

4. Read and write cookies

Through the cookie attribute, you can add, modify and read the cookie of the document. For example:

<!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(&#39;update&#39;).onclick = updateCookie;
        document.getElementById(&#39;write&#39;).onclick = createCookie;
        document.getElementById(&#39;clear&#39;).onclick = clearCookie;
        readCookies();        function readCookies() {
            document.getElementById(&#39;cookiedata&#39;).innerHTML = !document.cookie ? &#39;&#39; : document.cookie;
        }        function updateCookie() {
            document.cookie = &#39;cookie_&#39; + cookieCount + &#39;=update_&#39; + cookieCount;
            readCookies();
        }        function createCookie() {
            cookieCount++;
            document.cookie = &#39;cookie_&#39; + cookieCount + &#39;=value_&#39; + 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>

Copy after login

Result:

5. Understand ReadyState

Document.readyState helps you understand the page The current state of the page during loading and parsing. One thing to remember is that the browser will execute the script element immediately when it encounters it, unless you use the defer attribute to delay the execution of the script. readyState has three values representing different states.

loading: The browser is loading and executing the document;

interactive: The document has completed parsing, but the browser is loading other external resources (media, pictures, etc.);

complete: The page parsing is completed, and the external resources are completed at home.

During the entire loading and parsing process of the browser, the value of readyState will change one by one from loading, interactive and complete. When used in conjunction with the readystatechange event (triggered when the readyState state changes), readyState will become quite valuable.

<!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">

Copy after login

The above code uses the readystatechange event to achieve the effect of delayed execution. Only when the entire page on the page is parsed and contacted will the readystate value become interactive. At this time, the pressme

button

Bind click event. This operation can ensure that the required html elements are present and prevent errors from occurring. 　6. Obtain information about dom attribute implementation

　　document.implementation属性帮助你了解浏览器对dom属性的实现情况。该属性返回DOMImplementation对象，对象包含hasFeature方法，你可以通过该方法了解浏览器对某属性的实现情况。

<!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 class="brush:php;toolbar:false">");        
        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("

Copy after login

效果：

The above is the detailed content of HTML5 Guide (2) - Detailed introduction to operating Document metadata. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn