• 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函数:

     1 /***
    2 * 设置Cookie
    3 * @/// <param name="cookieName" type="string">Cookie的名称</param>
    4 * @/// <param name="cookieValue" type="string">Cookie的值</param>
    5 * @/// <param name="cookieDay" type="number">Cookie过期天数</param>
    6 */
    7 function SetCookie(cookieName, cookieValue, cookieDay) {
    8 //当前日期
    9 var today = new Date();
    10
    11 //Cookie过期时间
    12 var expire = new Date();
    13
    14 //如果未设置cookieDay参数或者cookieDay为0,取默认值1
    15 if (cookieDay == null || cookieDay == 0) {
    16 cookieDay = 1;
    17 }
    18
    19 //计算Cookie过期时间
    20 expire.setTime(today.getTime() + 3600000 * 24 * cookieDay);
    21
    22 //设置Cookie的值
    23 document.cookie = cookieName + "=" + escape(cookieValue) + ";expire=" + expire.toGMTString();
    24 }
    25
    26 /***
    27 * 读取指定的Cookie值
    28 * @/// <param name="cookieName" type="string">Cookie的名称</param>
    29 */
    30 function readCookie(cookieName){
    31 //Cookie字符串
    32 var cookieString = "" + document.cookie;
    33
    34 //找到cookieName的位置
    35 var find = cookieString.indexOf(cookieName);
    36
    37 //如果找到cookieName,返回空字符串
    38 if (find == -1 || cookieName == "") {
    39 return "";
    40 }
    41
    42 //确定分号的位置
    43 var index = cookieString.indexOf(';', index);
    44 if (index == -1) {
    45 index = cookieString.length;
    46 }
    47
    48 //读取Cookie值
    49 return unescape(cookieString.substring(find + cookieName.length + 1, index));
    50 }

      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对象。

  • 相关阅读:
    初认识AngularJS
    (imcomplete) UVa 10127 Ones
    UVa 10061 How many zero's and how many digits?
    UVa 11728 Alternate Task
    UVa 11490 Just Another Problem
    UVa 10673 Play with Floor and Ceil
    JSON对象和字符串的收发(JS客户端用typeof()进行判断非常重要)
    HTML.ActionLink 和 Url.Action 的区别
    EASYUI TREE得到当前节点数据的GETDATA方法
    jqueery easyui tree把已选中的节点数据拼成json或者数组(非常重要)
  • 原文地址:https://www.cnblogs.com/limits/p/2368171.html
Copyright © 2020-2023  润新知