html5指南-2.如何操作document metadata


Posted in HTML / CSS onJanuary 07, 2013

今天的内容是关于如何操作document对象。
1.操作Document Metadata
首先我们来看看相关的属性:
characterSet:获取当前document的编码方式,该属性为只读;
charset:获取或者设置当前document的编码方式;
compatMode:获取当前document的兼容模式;
cookie:获取或者设置当前document的cookie对象;
defaultCharset:获取浏览器默认的编码方式;
defaultView:获取当前当前document的window对象;
dir:获取或者设置当前document的文本对齐方式;
domain:获取或者设置当前document的domian值;
implementation:提供所支持的dom特性的信息;
lastModified:获取document最后的修改时间(如果没有最后修改时间,则返回当前时间);
location:提供当前document的url信息;
readyState:返回当前document的状态,该属性是只读属性;
referrer: 返回连接到当前document的document url信息;
title:获取或者设置当前document的title。
来看下面的例子:

复制代码
代码如下:

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

结果(不同浏览器显示的结果可能不一样):

html5指南-2.如何操作document metadata


2.如何理解兼容模式
compatMode属性告诉你浏览器是如何处理当前document的。有太多不标准的html了,浏览器会试图显示这些页面,即使他们不符合html规范。有些内容依赖于早先浏览器大战时所存在的独特的特性,而这些属性石不符合规范的。compatMode会返回一个或两个值,如下:
CSS1Compat:document符合一个有效的html规范(不一定是html5,验证的html4页面同样返回这个值);
BackCompat:document包含不符合规范的特性,触发了兼容模式。
3.使用Location对象
document.location返回一个Location对象,向你提供细粒度的document的地址信息,同时允许你导航到其他document。
protocol:获取或者设置document url的协议;
host:获取或者设置document url的主机信息;
href:获取或者设置document的地址信息;
hostname:获取或者设置document的主机名;
search:获取或者设置document url查询部分的信息;
hash:获取或者设置document url hash部分的信息;
assign(<url>):导航到一个指定url;
replace(<url>):移除当前document,导航到指定的url;
reload():重新加载当前document;
resolveURL(<url>):将相对路径变为绝对路径。
来看下面的例子
复制代码
代码如下:

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

结果:

html5指南-2.如何操作document metadata


4.读写cookie
通过cookie属性,可以对document的cookie进行新增,修改和读取操作。如下例:
复制代码
代码如下:

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

结果:

html5指南-2.如何操作document metadata


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

效果:
html5指南-2.如何操作document metadata
HTML / CSS 相关文章推荐
纯CSS3实现3D旋转书本效果
Mar 21 HTML / CSS
css3通过scale()、rotate()实现放大、旋转
Mar 19 HTML / CSS
HTML5对手机页面长按会粘贴复制禁用的解决方法
Jul 19 HTML / CSS
HTML5 canvas基本绘图之绘制矩形
Jun 27 HTML / CSS
使用phonegap检测网络状态的方法
Mar 30 HTML / CSS
HTML5 解析规则分析
Aug 14 HTML / CSS
html5+css3实现一款注册表单实例
Apr 17 HTML / CSS
html5画布旋转效果示例
Jan 27 HTML / CSS
HTML5在线预览PDF的示例代码
Sep 14 HTML / CSS
canvas压缩图片以及卡片制作的方法示例
Dec 04 HTML / CSS
Html5让容器充满屏幕高度或自适应剩余高度的布局实现
May 14 HTML / CSS
纯CSS实现酷炫的霓虹灯效果
Apr 13 HTML / CSS
html5指南-3.如何实现html元素拖拽功能
Jan 07 #HTML / CSS
html5指南-4.使用Geolocation实现定位功能
Jan 07 #HTML / CSS
html5指南-5.使用web storage存储键值对的数据
Jan 07 #HTML / CSS
html5指南-6.如何创建离线web应用程序实现离线访问
Jan 07 #HTML / CSS
html5指南-7.geolocation结合google maps开发一个小的应用
Jan 07 #HTML / CSS
在html5的Canvas上绘制椭圆的几种方法总结
Jan 07 #HTML / CSS
html5构建触屏网站之touch事件介绍
Jan 07 #HTML / CSS
You might like
php 变量定义方法
2009/06/14 PHP
PHP自带方法验证邮箱、URL、IP是否合法的函数
2016/12/08 PHP
Smarty模板类内部原理实例分析
2019/07/03 PHP
js实时监听文本框状态的方法
2011/04/26 Javascript
事件绑定之小测试  onclick &amp;&amp; addEventListener
2011/07/31 Javascript
Eclipse下jQuery文件报错出现错误提示红叉
2014/01/13 Javascript
For循环中分号隔开的3部分的执行顺序探讨
2014/05/27 Javascript
JavaScript中Cookie操作实例
2015/01/09 Javascript
基于react框架使用的一些细节要点的思考
2017/05/31 Javascript
详解vue跨组件通信的几种方法
2017/06/15 Javascript
JS倒计时实例_天时分秒
2017/08/22 Javascript
js实现鼠标移动到图片产生遮罩效果
2017/10/21 Javascript
实例讲解javascript实现异步图片上传方法
2017/12/05 Javascript
利用Javascript实现一套自定义事件机制
2017/12/14 Javascript
10行代码实现微信小程序滑动tab切换
2018/12/28 Javascript
JSON 入门教程基础篇 json入门学习笔记
2020/09/22 Javascript
[51:05]DOTA2上海特级锦标赛主赛事日 - 5 败者组决赛Liquid VS EG第一局
2016/03/06 DOTA
[35:34]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Ubuntu 14.04+Django 1.7.1+Nginx+uwsgi部署教程
2014/11/18 Python
python多线程socket编程之多客户端接入
2017/09/12 Python
Python单向链表和双向链表原理与用法实例详解
2018/08/31 Python
Python字符串格式化输出代码实例
2019/11/22 Python
Python3开发实例之非关系型图数据库Neo4j安装方法及Python3连接操作Neo4j方法实例
2020/03/18 Python
Python生成器常见问题及解决方案
2020/03/21 Python
Python通过kerberos安全认证操作kafka方式
2020/06/06 Python
html5应用缓存_动力节点Java学院整理
2017/07/13 HTML / CSS
HTML5+CSS3绘制锯齿状的矩形
2016/03/01 HTML / CSS
Camper鞋西班牙官方网上商店:西班牙马略卡岛的鞋类品牌
2019/03/14 全球购物
英国最大的宠物商店:Pets at Home
2019/04/17 全球购物
Charles & Keith欧盟:新加坡时尚品牌
2019/08/01 全球购物
主要领导对照检查材料
2014/08/26 职场文书
员工评语范文
2014/12/31 职场文书
工伤劳动仲裁代理词
2015/05/25 职场文书
幼儿园教师暑期培训心得体会
2016/01/09 职场文书
大学生创业计划书
2019/06/24 职场文书
JS数组去重详情
2021/11/07 Javascript