Document对象

Document对象

document.writeln()将内容添加到HTML文档的末尾。document.write()类似，但不会给添加到文档里的字符串附上行结束字符。
document.URL属性返回当前文档的URL。

获取文档信息

如下的代码：

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

其结果为：

characterSet: UTF-8
charset: UTF-8
compatMode: CSS1Compat
defaultCharset: undefined
dir: 
domain: localhost
lastModified: 04/06/2017 16:49:07
referrer: 
title: xxxx

compatMode属性的值

• CSS1Compat此文档遵循某个有效的HTML规范（但不必是HTML5，有效的HTML4文档也会返回这个值）
• BackCompat此文档含有非标准的功能，已触发兼容模式

使用location对象

document.location属性返回一个Location对象，可以获取文档地址信息，也允许你导航到其他文档上。

如下的代码：

<script>
    document.writeln("<pre>");

    document.writeln("href: " + document.location.href);
    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.write("</pre>");
</script>

其结果为：

href: http://localhost:63342/OA/test/document.html?query=abc#demo
protocol: http:
host: localhost:63342
hostname: localhost
port: 63342
pathname: /OA/test/document.html
search: ?query=abc
hash: #demo

通常通过href属性来导航到其它文档，但也可以通过Location对象定义的一些方法来实现。

• assign()导航到指定的URL
• replace()清除当前文档并导航到URL所指定的那个文档
• reload()重新载入当前的文档
• resolveURL()将指定的相对URL解析成绝对URL

如下

        <script>
            document.getElementById("pressme").onclick = function () {
                document.location.assign("http://baidu.com");
            };
        </script>

读取和写入cookie

读取cookie属性值时会得到与文档相关的所有的cookie，cookie是形式为name=value的名称/值对。如果存在多个cookie，那么cookie属性会把它们一起作为结果返回，之间以分号相隔。

如下：

<script>
    var cookieCount = 0;
    document.getElementById("update").onclick = updateCookie;
    document.getElementById("write").onclick = createCookie;
    readCookies();
    function readCookies(){
        document.getElementById("cookiedata").innerHTML = document.cookie;
    }
    function createCookie() {
        cookieCount++;
        document.cookie = "Cookie_"+cookieCount+"=Value_"+cookieCount;
        readCookies();
    }
    function updateCookie(){
        document.cookie = "Cookie_"+cookieCount+"=Updated_"+cookieCount;
        readCookies();
    }
</script>

其结果为：

Cookie_1=Value_1; Cookie_2=Value_2; Cookie_3=Updated_3; Cookie_4=Updated_4

浏览器中显示如下：

还可以在cookie中添加额外的字段来改变cookie的处理方式

理解就绪状态

document.readyState属性提供了加载和解析HTML文档过程中当前处于哪个阶段的信息。在默认情况下浏览器会在遇到文档里的script元素时立刻开始执行脚本。

readyState属性返回的值：

• loading浏览器正在加载和处理此文档
• interactive文档已被解析，但浏览器还在加载其中链接的资源（图像和媒体文件等）
• complete文档已被解析，所有的资源也已加载完毕

获取DOM的实现情况

document.implementation属性向你提供了浏览器对DOM功能的实现信息。

获取HTML元素对象

使用属性获取元素对象

Document提供了一组属性，会返回代表文档中特定元素或元素类型的对象。

还可以使用数组风格的标记来获取代表某个已命名元素（named element）的对象。它指的是带有id或name属性的元素。