JavaScript学习之三JavaScript浏览器对象模型详解----document对象

 

 

       document对象是windows对象的属性，表示当前浏览器中加载的页面文档。document对象是BOM和DOM（文档对象模型，后面会详细讲解）共有的对象。

       由于BOM没有统一的标准，各种浏览器的document对象特性并不完全相同，所以在使用document对象的时候需要考虑浏览器的兼容性，尽量使用各类浏览器都支持的属性。

1. 通用属性

•   document.bgColor           页面背景色
•   document.fgColor            页面的前景色
•   document.linkColor  页面文档中连接的颜色
•   document.vlinkColor       页面文档中访问过的链接颜色
•   document.alinkColor       页面文档中激活链接的颜色

　　注：以上这五个属性不建议使用，根据W3C的标准它使用了一些旧特性。

•   document.domain           获取文档所在的域名
•   document.referrer            将用户引入当前页面的URL
•   document.URL                  当前页面的URL
•   document.title                  当前页面的标题
•   document.lastModified   上次修改页面的时间
•   document.cookie             设置或者获取Cookie的值

Cookie是在不同页面之间传递参数的方法之一，也是在客户端保存数据常用的方法，直接设置document.Cookie属性即可设置Cookie,Cookie是以普通文本方式保存的。

格式为若干组键值对的形式(name=value)的字符串，多组键值对之间用分号(;)分隔。例如：name=老邓;password=1234；除此之外还可以在Cookie字符串上加特殊的属性。Cookie支持以下属性：

expires=date： 表示Cookie过期的时间，如果没设置该属性，Cookie将在浏览器关闭时被删除；如果expires设置的是一个未来时间，那么在这个时间之前Cookie均可使用。如果expires设置的是一个过去的时间，那么Cookie会被立即删除。

domin=dominName： 表示允许访问Cookie的安全域，通过设置该属性可以实现在多个域之间共享Cookie的值。

path=allowPath： 表示允许访问Cookie的服务端路径，只有在该路径下的页面才可以访问该Cookie。

secure： 表示该Cookie是安全的，只有在安全域内的站点才能访问该Cookie。

       使用Cookie时需要注意：Cookie允许保存的最大长度是4Kb，因此只能在Cookie中保存少量数据；另外浏览器可能会禁用Cookie，所以不见在Cookie中保存关键的参数或数据。下面是两个常用的Cookie函数：

/***
    * 设置Cookie
    * @/// <param name="cookieName" type="string">Cookie的名称</param>
    * @/// <param name="cookieValue" type="string">Cookie的值</param>  
    * @/// <param name="cookieDay" type="number">Cookie过期天数</param> 
*/
function SetCookie(cookieName, cookieValue, cookieDay) {
    //当前日期
    var today = new Date();

    //Cookie过期时间
    var expire = new Date();

    //如果未设置cookieDay参数或者cookieDay为0，取默认值1
    if (cookieDay == null || cookieDay == 0) {
        cookieDay = 1;
    }

    //计算Cookie过期时间
    expire.setTime(today.getTime() + 3600000 * 24 * cookieDay);

    //设置Cookie的值
    document.cookie = cookieName + "=" + escape(cookieValue) + ";expire=" + expire.toGMTString();
}

/***
    * 读取指定的Cookie值
    * @/// <param name="cookieName" type="string">Cookie的名称</param> 
*/
function readCookie(cookieName){
    //Cookie字符串
    var cookieString = "" + document.cookie;

    //找到cookieName的位置
    var find = cookieString.indexOf(cookieName);

    //如果找到cookieName，返回空字符串
    if (find == -1 || cookieName == "") {
        return "";
    }

    //确定分号的位置
    var index = cookieString.indexOf(';', index);
    if (index == -1) {
        index = cookieString.length;
    }

    //读取Cookie值
    return unescape(cookieString.substring(find + cookieName.length + 1, index));
}

　　2.　集合属性　

　　　　document对象具有一些集合类的属性，通过集合属性可以获取当前页面内所有的同类HTML元素。

属性	含义
anchors	返回文档中所有锚的集合，说明：IE中的document.anchors将返回具有name或者ID属性的锚，而在firefox中将返回name属性的锚
applets	返回文档中所有applets的集合
embeds	返回文档中所有embeds对象的集合
forms	返回文档中所有表单的集合
images	返回文档中所有img对象的集合
links	返回文档中所有链接的集合，即所有设置了href属性的<a>元素方法

　　3.  方法　

• document.write/document.writeln     在当前文档中输出文字，两者的区别在于writeln会在输出文字之后附加一个换行符\n。
• document.open        打开文档
• document.close        关闭文档，同时将写入的内容输出到页面。

　　　　

　　后话：document对象就这些内容，其实也不很复杂的，关键是多多练习，做到熟能生巧就OK。下篇我将继续讲解location、screen、navigation、history对象。