html5 guide - 2. How to operate document metadata

Author：Eve Cole Update Time：2025-04-28 13:32:02

Today's content is about how to manipulate document objects.

1. Operate Document Metadata

First, let’s take a look at the related attributes:

characterSet: Get the encoding method of the current document, and this property is read-only;

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

compatMode: Get the compatibility mode of the current document;

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

defaultCharset: Get the default encoding method of the browser;

defaultView: Get 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: Provide information about the supported dom features;

lastModified: Get the last modification time of the document (if there is no last modification time, it returns the current time);

location: Provide url information of the current document;

readyState: Returns the status of the current document, which is a read-only property;

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

title: Get or set the title of the current document.

Let’s take a look at the following example:

<!DOCTYPE html>

<html>

<head>

<title>example</title>

</head>

<body>

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 (The results displayed by different browsers may be different):

2. How to understand the compatibility mode

The compatMode property tells you how the browser handles the current document. There are too many non-standard html now that the browser will try to display these pages even if they do not comply with the html specification. Some content relies on unique features that existed in the earlier browser wars, and these attribute stones do not comply with the norm. CompatMode returns one or two values, as follows:

CSS1Compat: document complies with a valid html specification (not necessarily HTML5/">html5, the verified html4 page also returns this value);

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

3. Use Location object

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

protocol: Get or set the protocol for 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 of the document url query part;

hash: Get or set the information about the document url hash part;

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>): Change the relative path to an absolute path.

Let’s take a 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">

<head>

</head>

<body>

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

Through the cookie attribute, you can add, modify and read cookies in the document. As shown in the following example:

<!DOCTYPE HTML>

<html>

<head>

<title>Example</title>

</head>

<body>

</p>

Add Cookie</button>

Update Cookie</button>

Clear Cookie</button>

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 state of the page during the page loading and parsing process. One thing to remember is that the browser will execute immediately when encountering a script element, 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 a document;

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

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

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

<!DOCTYPE HTML>

<html>

<head>

<title>Example</title>

document.onreadystatechange = function () {

if (document.readyState == "interactive") {

document.getElementById("pressme").onclick = function () {

document.getElementById("results").innerHTML = "Button Pressed";

}

</script>

</head>

<body>

Press Me</button>

</body>

</html>

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 click event will be bound to the pressme button. This operation ensures that all required html elements exist and prevents errors from happening.

6. Obtain information on dom attribute implementation

The document.implementation property helps you understand the browser's implementation of the dom property. This property returns a DOMImplementation object, which contains a hasFeature method, through which you can understand the browser's implementation of a certain property.

<!DOCTYPE HTML>

<html>

<head>

<title>Example</title>

</head>

<body>

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: