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

  • 相关阅读:
    【git】git命令集合
    【maven】【IDEA】idea中使用maven编译项目,报错java: 错误: 找不到符号 【2】
    【mybatis】mybatis传参的几种方式
    【EasyExcel】使用easyExcel过程中,项目报错的解决集合
    【Maven】【IDEA】在idea中开发web项目,解决maven的jar包冲突的方法
    【Easyexcel】java导入导出超大数据量的xlsx文件 解决方法
    【maven】idea的pom文件修改,引入新的jar包,无效,本地仓库始终没有下载新jar包的问题解决【idea pom Dependency not found】
    【java】javac编译多个有依赖关系的java文件为class文件
    【java】javac命令在win10不可用,提示javac不是内部或外部命令,也不是可运行的程序【解决方法】
    【POI】java服务生成List数据集合,后台服务生成xlsx临时文件,并将临时文件上传到腾讯云上,并实现xlsx浏览器预览
  • 原文地址:https://www.cnblogs.com/limits/p/2368171.html
Copyright © 2020-2023  润新知