html5指南-2.如何操作document metadata
mple 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>
结果：
5.理解ReadyState
document.readyState帮助你了解页面加载和解析过程中，页面所处的当前状态。需要记住的一点是，浏览器当遇到script元素时会立即执行，除非你使用defer属性延时脚本的执行。readyState有三个值代表不同的状态。
loading：浏览器正在加载和执行document；
interactive：docuent已经完成解析，但是浏览器正在加载其他外部资源（media，图片等）；
complete：页面解析完成，外部资源在家完毕。
在浏览器整个加载和解析的过程中，readyState的值会从loading，interactive和complete逐个改变。当结合readystatechange事件（readyState状态改变时触发）使用，readyState会变得相当有价值。
复制代码代码如下:
<!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>
上面的代码使用readystatechange事件实现了延时执行的效果，只有当页面上整个页面解析接触之后readystate的值才会变成interactive，这时再为pressme按钮绑定click事件。这样操作可以确保所需要的html元素都存在，防止错误发生。
6.获取dom属性实现的信息
document.implementation属性帮助你了解浏览器对dom属性的实现情况。该属性返回DOMImplementation对象，对象包含hasFeature方法，你可以通过该方法了解浏览器对某属性的实现情况。
复制代码代码如下:
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman" />
<meta name="description" content="A simple
</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>
结果：
5.理解ReadyState
document.readyState帮助你了解页面加载和解析过程中，页面所处的当前状态。需要记住的一点是，浏览器当遇到script元素时会立即执行，除非你使用defer属性延时脚本的执行。readyState有三个值代表不同的状态。
loading：浏览器正在加载和执行document；
interactive：docuent已经完成解析，但是浏览器正在加载其他外部资源（media，图片等）；
complete：页面解析完成，外部资源在家完毕。
在浏览器整个加载和解析的过程中，readyState的值会从loading，interactive和complete逐个改变。当结合readystatechange事件（readyState状态改变时触发）使用，readyState会变得相当有价值。
复制代码代码如下:
<!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>
上面的代码使用readystatechange事件实现了延时执行的效果，只有当页面上整个页面解析接触之后readystate的值才会变成interactive，这时再为pressme按钮绑定click事件。这样操作可以确保所需要的html元素都存在，防止错误发生。
6.获取dom属性实现的信息
document.implementation属性帮助你了解浏览器对dom属性的实现情况。该属性返回DOMImplementation对象，对象包含hasFeature方法，你可以通过该方法了解浏览器对某属性的实现情况。
复制代码代码如下:
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman" />
<meta name="description" content="A simple