html5指南-2.如何操作document metadata_HTML5教程
推薦：html5 Canvas畫圖教程(5)—canvas里畫曲線之a(chǎn)rc方法anvas里畫曲線的難點(diǎn)之一，就在于他連曲線的函數(shù)就有4個(gè)！分別是arc,arcTo,quadraticCurveTo,bezierCurveTo.我從最簡單的arc方法講起吧,感興趣的朋友可以了解下哦
今天的內(nèi)容是關(guān)于如何操作document對象。1.操作Document Metadata
首先我們來看看相關(guān)的屬性：
characterSet：獲取當(dāng)前document的編碼方式，該屬性為只讀；
charset：獲取或者設(shè)置當(dāng)前document的編碼方式；
compatMode：獲取當(dāng)前document的兼容模式；
cookie：獲取或者設(shè)置當(dāng)前document的cookie對象；
defaultCharset：獲取瀏覽器默認(rèn)的編碼方式；
defaultView：獲取當(dāng)前當(dāng)前document的window對象；
dir：獲取或者設(shè)置當(dāng)前document的文本對齊方式；
domain：獲取或者設(shè)置當(dāng)前document的domian值；
implementation：提供所支持的dom特性的信息；
lastModified：獲取document最后的修改時(shí)間（如果沒有最后修改時(shí)間，則返回當(dāng)前時(shí)間）；
location：提供當(dāng)前document的url信息；
readyState：返回當(dāng)前document的狀態(tài)，該屬性是只讀屬性；
referrer： 返回連接到當(dāng)前document的document url信息；
title：獲取或者設(shè)置當(dāng)前document的title。
來看下面的例子：
復(fù)制代碼 代碼如下:m.dounai2.com
<!DOCTYPE html>
<html>
<head>
<title>example</title>
</head>
<body>
<script type="text/javascript">
document.writeln('<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>
結(jié)果(不同瀏覽器顯示的結(jié)果可能不一樣)：
2.如何理解兼容模式
compatMode屬性告訴你瀏覽器是如何處理當(dāng)前document的。有太多不標(biāo)準(zhǔn)的html了，瀏覽器會(huì)試圖顯示這些頁面，即使他們不符合html規(guī)范。有些內(nèi)容依賴于早先瀏覽器大戰(zhàn)時(shí)所存在的獨(dú)特的特性，而這些屬性石不符合規(guī)范的。compatMode會(huì)返回一個(gè)或兩個(gè)值，如下：
CSS1Compat：document符合一個(gè)有效的html規(guī)范（不一定是HTML5/">html5，驗(yàn)證的html4頁面同樣返回這個(gè)值）；
BackCompat：document包含不符合規(guī)范的特性，觸發(fā)了兼容模式。
3.使用Location對象
document.location返回一個(gè)Location對象，向你提供細(xì)粒度的document的地址信息，同時(shí)允許你導(dǎo)航到其他document。
protocol：獲取或者設(shè)置document url的協(xié)議；
host：獲取或者設(shè)置document url的主機(jī)信息；
href：獲取或者設(shè)置document的地址信息；
hostname：獲取或者設(shè)置document的主機(jī)名；
search：獲取或者設(shè)置document url查詢部分的信息；
hash：獲取或者設(shè)置document url hash部分的信息；
assign(<url>)：導(dǎo)航到一個(gè)指定url；
replace(<url>)：移除當(dāng)前document，導(dǎo)航到指定的url；
reload()：重新加載當(dāng)前document；
resolveURL(<url>)：將相對路徑變?yōu)榻^對路徑。
來看下面的例子：
復(fù)制代碼 代碼如下:m.dounai2.com
<!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>
結(jié)果：
4.讀寫cookie
通過cookie屬性，可以對document的cookie進(jìn)行新增，修改和讀取操作。如下例：
復(fù)制代碼 代碼如下:m.dounai2.com
<!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>
結(jié)果：
5.理解ReadyState
document.readyState幫助你了解頁面加載和解析過程中，頁面所處的當(dāng)前狀態(tài)。需要記住的一點(diǎn)是，瀏覽器當(dāng)遇到script元素時(shí)會(huì)立即執(zhí)行，除非你使用defer屬性延時(shí)腳本的執(zhí)行。readyState有三個(gè)值代表不同的狀態(tài)。
loading：瀏覽器正在加載和執(zhí)行document；
interactive：docuent已經(jīng)完成解析，但是瀏覽器正在加載其他外部資源（media，圖片等）；
complete：頁面解析完成，外部資源在家完畢。
在瀏覽器整個(gè)加載和解析的過程中，readyState的值會(huì)從loading，interactive和complete逐個(gè)改變。當(dāng)結(jié)合readystatechange事件（readyState狀態(tài)改變時(shí)觸發(fā)）使用，readyState會(huì)變得相當(dāng)有價(jià)值。
復(fù)制代碼 代碼如下:m.dounai2.com
<!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事件實(shí)現(xiàn)了延時(shí)執(zhí)行的效果，只有當(dāng)頁面上整個(gè)頁面解析接觸之后readystate的值才會(huì)變成interactive，這時(shí)再為pressme按鈕綁定click事件。這樣操作可以確保所需要的html元素都存在，防止錯(cuò)誤發(fā)生。
6.獲取dom屬性實(shí)現(xiàn)的信息
document.implementation屬性幫助你了解瀏覽器對dom屬性的實(shí)現(xiàn)情況。該屬性返回DOMImplementation對象，對象包含hasFeature方法，你可以通過該方法了解瀏覽器對某屬性的實(shí)現(xiàn)情況。
復(fù)制代碼 代碼如下:m.dounai2.com
<!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>
效果：
分享：使用css創(chuàng)建三角形 使用CSS3創(chuàng)建3d四面體原理及代碼(html5實(shí)踐)今天讀了篇關(guān)于如何使用css3創(chuàng)建3d四面體的文章，覺的相當(dāng)不錯(cuò)，所以拿出來和大家分享一下，如何使用div+css創(chuàng)建三角形。在這里我先把相關(guān)代碼粘貼出來，然后再為大家講解原理
相關(guān)HTML5教程：
- 只要五步 就可以用HTML5/CSS3快速制作便簽貼特效(圖)
- 網(wǎng)易微博Web App用HTML5開發(fā)的過程介紹
- HTML5 對各個(gè)標(biāo)簽的定義與規(guī)定：body的介紹
- 關(guān)于HTML5的安全問題開發(fā)人員需要牢記的
- 關(guān)于HTML5的22個(gè)初級技巧(圖文教程)
- 開發(fā)人員所需要知道的HTML5性能分析面面觀
- HTML5 Web Database 數(shù)據(jù)庫的SQL語句的使用方法
- HTML5實(shí)踐-圖片設(shè)置成灰度圖
- HTML5安全介紹之內(nèi)容安全策略（CSP）簡介
- HTML5 Web存儲方式的localStorage和sessionStorage進(jìn)行數(shù)據(jù)本地存儲案例應(yīng)用
- Bootstrap 學(xué)習(xí)分享
- input元素的url類型和email類型簡介
HTML5教程Rss訂閱Div+Css教程搜索
HTML5教程推薦
- html5播放視頻且動(dòng)態(tài)截圖實(shí)現(xiàn)步驟與代碼(支持safari其他未測試)
- html5的新增的標(biāo)簽和廢除的標(biāo)簽簡要概述
- HTML中fieldset標(biāo)簽概述及使用方法
- HTML5中實(shí)現(xiàn)拖放效果無須借助javascript
- HTML5之SVG 2D入門12—SVG DOM及DOM操作介紹
- 免費(fèi)獲得微軟MCSD證書趕快行動(dòng)吧！
- HTML4和HTML5之間除了相似以外的10個(gè)主要不同
- HTML5之SVG 2D入門6—視窗坐標(biāo)系與用戶坐標(biāo)系及變換概述
- html5 瀏覽器支持 如何讓所有的瀏覽器都支持HTML5標(biāo)簽樣式
- html5 Canvas畫圖教程(3)—canvas出現(xiàn)1像素線條模糊不清的原因
- 相關(guān)鏈接：
- 教程說明：
HTML5教程-html5指南-2.如何操作document metadata
。