今天的内容是关于如何操作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。
来看下面的例子：
复制代码
代码如下:<script type="text/javascript"> <br>document.writeln('<pre class="brush:php;toolbar:false;">'); <br>document.writeln('characterSet:' + document.characterSet); <br>document.writeln('charset:' + document.charset); <br>document.writeln('compatMode:' + document.compatMode); <br>document.writeln('defaultCharset:' + document.defaultCharset); <br>document.writeln('dir:' + document.dir); <br>document.writeln('domain:' + document.domain); <br>document.writeln('lastModified:' + document.lastModified); <br>document.writeln('referrer:' + document.referrer); <br>document.writeln('title:' + document.title); <br>document.write(''); <br></script><br><br><br> </div> <br><p>结果(不同浏览器显示的结果可能不一样)： <br></p> <p><img alt="" src="http://files.jb51.net/file_images/article/201301/2013010716343819.png?x-oss-process=image/resize,p_40"></p> <br><strong>2.如何理解兼容模式</strong><br><p>compatMode属性告诉你浏览器是如何处理当前document的。有太多不标准的html了，浏览器会试图显示这些页面，即使他们不符合html规范。有些内容依赖于早先浏览器大战时所存在的独特的特性，而这些属性石不符合规范的。compatMode会返回一个或两个值，如下： <br>CSS1Compat：document符合一个有效的html规范（不一定是html5，验证的html4页面同样返回这个值）； <br>BackCompat：document包含不符合规范的特性，触发了兼容模式。 <br><strong>3.使用Location对象</strong> <br>document.location返回一个Location对象，向你提供细粒度的document的地址信息，同时允许你导航到其他document。 <br>protocol：获取或者设置document url的协议； <br>host：获取或者设置document url的主机信息； <br>href：获取或者设置document的地址信息； <br>hostname：获取或者设置document的主机名； <br>search：获取或者设置document url查询部分的信息； <br>hash：获取或者设置document url hash部分的信息； <br>assign(<url>)：导航到一个指定url； <br>replace(<url>)：移除当前document，导航到指定的url； <br>reload()：重新加载当前document； <br>resolveURL(<url>)：将相对路径变为绝对路径。 <br><strong>来看下面的例子</strong>： <br><br></url></url></url></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode144'));"><u>复制代码</u></span></div>代码如下:</div> <div class="msgborder" id="phpcode144"> <br><br><br><br><title></title> <br><br><br><script type="text/javascript"> <br>document.writeln('<pre class="brush:php;toolbar:false;">'); <br>document.writeln('protocol:' + document.location.protocol); <br>document.writeln('host:' + document.location.host); <br>document.writeln('hostname:' + document.location.hostname); <br>document.writeln('port:' + document.location.port); <br>document.writeln('pathname:' + document.location.pathname); <br>document.writeln('search:' + document.location.search); <br>document.writeln('hash:' + document.location.hash); <br>document.writeln(''); <br></script><br><br><br> </div> <br><p>结果： <br></p> <p><img alt="" src="http://files.jb51.net/file_images/article/201301/2013010716343820.png?x-oss-process=image/resize,p_40"></p> <br><strong>4.读写cookie <br></strong><p>通过cookie属性，可以对document的cookie进行新增，修改和读取操作。如下例： <br><br></p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4103" title="Somark Document Parser"><img src="https://img.php.cn/upload/skill/000/000/081/178990406911131.jpg" alt="Somark Document Parser" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill4103" title="Somark Document Parser" class="overflowclass">Somark Document Parser</a> <p class="overflowclass">使用 SoMark 将 PDF、图片（PNG/JPG/BMP/TIFF/WebP/HEIC）、Word、PPT 及其他文档解析为 Markdown 或 JSON，满足各类文档解析需求（如简历等）。</p> </div> <a rel="nofollow" href="/xiazai/skill4103" title="Somark Document Parser" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode145'));"><u>复制代码</u></span></div>代码如下:</div> <div class="msgborder" id="phpcode145"> <br><br><br><br><title>Example</title> <br><meta name="author" content="Adam Freeman"> <br><meta name="description" content="A simple example"> <br><br><br><p id="cookiedata"> <br></p> <br><button id="write"> <br>Add Cookie</button> <br><button id="update"> <br>Update Cookie</button> <br><button id="clear"> <br>Clear Cookie</button> <br><script type="text/javascript"> <br>var cookieCount = 0; <br>document.getElementById('update').onclick = updateCookie; <br>document.getElementById('write').onclick = createCookie; <br>document.getElementById('clear').onclick = clearCookie; <br>readCookies(); <br>function readCookies() { <br>document.getElementById('cookiedata').innerHTML = !document.cookie ? '' : document.cookie; <br>} <br>function updateCookie() { <br>document.cookie = 'cookie_' + cookieCount + '=update_' + cookieCount; <br>readCookies(); <br>} <br>function createCookie() { <br>cookieCount++; <br>document.cookie = 'cookie_' + cookieCount + '=value_' + cookieCount; <br>readCookies(); <br>} <br>function clearCookie() { <br>var exp = new Date(); <br>exp.setTime(exp.getTime() - 1); <br>var arrStr = document.cookie.split("; "); <br>for (var i = 0; i < arrStr.length; i++) { <br>var temp = arrStr[i].split("="); <br>if (temp[0]) { <br>document.cookie = temp[0] + "=;expires=" + exp.toGMTString(); <br>}; <br>} <br>cookieCount = 0; <br>readCookies(); <br>} <br></script><br><br><br> </div> <br><p>结果： <br></p> <p><img alt="" src="http://files.jb51.net/file_images/article/201301/2013010716343821.png?x-oss-process=image/resize,p_40"></p> <br><strong>5.理解ReadyState</strong><br><p>document.readyState帮助你了解页面加载和解析过程中，页面所处的当前状态。需要记住的一点是，浏览器当遇到script元素时会立即执行，除非你使用defer属性延时脚本的执行。readyState有三个值代表不同的状态。 <br>loading：浏览器正在加载和执行document； <br>interactive：docuent已经完成解析，但是浏览器正在加载其他外部资源（media，图片等）； <br>complete：页面解析完成，外部资源在家完毕。 <br>在浏览器整个加载和解析的过程中，readyState的值会从loading，interactive和complete逐个改变。当结合readystatechange事件（readyState状态改变时触发）使用，readyState会变得相当有价值。 <br><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode146'));"><u>复制代码</u></span></div>代码如下:</div> <div class="msgborder" id="phpcode146"> <br><br><br><br><title>Example</title> <br><meta name="author" content="Adam Freeman"> <br><meta name="description" content="A simple example"> <br><script> <br>document.onreadystatechange = function () { <br>if (document.readyState == "interactive") { <br>document.getElementById("pressme").onclick = function () { <br>document.getElementById("results").innerHTML = "Button Pressed"; <br>} <br>} <br>} <br></script><br><br><br><button id="pressme"> <br>Press Me</button> <br><pre class="brush:php;toolbar:false;" id="results"></pre> <br><br><br> </div> <br><p>上面的代码使用readystatechange事件实现了延时执行的效果，只有当页面上整个页面解析接触之后readystate的值才会变成interactive，这时再为pressme按钮绑定click事件。这样操作可以确保所需要的html元素都存在，防止错误发生。 <br><strong>6.获取dom属性实现的信息</strong> <br>document.implementation属性帮助你了解浏览器对dom属性的实现情况。该属性返回DOMImplementation对象，对象包含hasFeature方法，你可以通过该方法了解浏览器对某属性的实现情况。 <br><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode147'));"><u>复制代码</u></span></div>代码如下:</div> <div class="msgborder" id="phpcode147"> <br><br><br><br><title>Example</title> <br><meta name="author" content="Adam Freeman"> <br><meta name="description" content="A simple example"> <br><br><br><script> <br>var features = ["Core", "HTML", "CSS", "Selectors-API"]; <br>var levels = ["1.0", "2.0", "3.0"]; <br>document.writeln("<pre class="brush:php;toolbar:false;">"); <br>for (var i = 0; i < features.length; i++) { <br>document.writeln("Checking for feature: " + features[i]); <br>for (var j = 0; j < levels.length; j++) { <br>document.write(features[i] + " Level " + levels[j] + ": "); <br>document.writeln(document.implementation.hasFeature(features[i], levels[j])); <br>} <br>} <br>document.write("") <br></script>
效果： 
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
