DOM 4

Posted 2020-09-28 Hale.Proh

1. ***html DOM常用对象:

   Form

2. BOM

 

1. ***HTML DOM常用对象:

   Form: 代表一个<form元素

   获取: var form=document.forms[i/id/name];

   属性: .length: 相当于form.elements.length

   方法: .submit() : 专用于手动提交表单

          问题: 用户可能按回车，自动提交

          解决: 表单提交的最后一关是一个事件

             form.onsubmit(): 当表单正式提交前自动触发

       获取*表单*元素:

              var elem=form.elements[i/id/name];

              更简化: 如果表单元素有name属性:

                               form.name

       方法: .focus() : 让当前表单元素获得焦点

 

 

 

 

1. ***BOM

  window

     打开关闭窗口

     窗口大小和位置

     定时器

 

1. ***BOM:

  什么是: Browser Object Model

      专门操作浏览器窗口的API —— 没有标准

  DHTML对象模型:

   window 2个角色:

        1. 代替global作为全局作用域对象

             所有全局函数和全局变量都是window的成员

        2. 封装所有DOM和BOM的API

   包括:

      history 当前窗口打开后成功访问的历史记录

      location 当前窗口正在打开的URL

      document DOM树的根节点，包含所有网页内容

      screen 当前显示设备的信息

      navigator 浏览器的配置信息(版本，名称，插件，cookie)

      event 定义了浏览器中所有事件

 

  window: 指代当前浏览器窗口对象

    打开和关闭窗口

    打开: open("url","name")

    关闭: close();

 

    打开一个连接，共有几种方式：

    1. 在当前窗口打开, 可后退:

       html: <a href="url" target="_self">

       js: open("url","_self");

    2. 在当前窗口打开, 禁止后退:

       js: location.replace("url")

           在当前窗口打开新url，用新url替换history中原有url

       原理:

         history: 保存当前窗口打开后成功访问过的url的历史记录栈

    3. 在新窗口打开，可打开多个:

       html: <a href="url" target="_blank">

       js: open("url","_blank");

    4. 在新窗口打开，只能打开一个:

       html:<a href="url" target="name">

       js: open("url","name");

     每个窗口都有一个唯一的name属性

     name: 在内存中唯一标识一个窗口的名称

     规定: 同时只能打开一个相同name的窗口

       预定义: _self : 和当前窗口使用相同的name

                   _blank: 不指定自定义name，由浏览器随机分配

 

   窗口大小和窗口位置: (了解)

   窗口大小:

      1. 完整窗口大小:  window.outerWidth/outerHeight

 ***2. 文档显示区大小: window.innerWidth/innerHeight

     调整: 2个机会:

      1. 在打开窗口时，就规定大小:

         var config="left=?,top=?,width=?,height=?";

         open("url","name",config)

      2. 打开窗口后再调整——被禁用

       window.resizeTo(width,height)

       window.resizeBy(width增量,height增量)

   窗口位置: 窗口左上角距屏幕左上角的位置

       window.screenLeft|screenX

       window.screenTop|screenY

     调整:

       moveTo(left,top)

       moveBy(left的增量,top的增量)

 

*****定时器:

  什么是: 让程序按照指定时间执行一项任务

  何时:

     1. 让程序每隔一段时间间隔反复执行一项任务——周期性

     2. 让程序等待一段时间后自动执行一次任务——一次性

  如何:

    周期性定时器: 3件事:

     1. 任务函数task

     2. 启动定时器: 将task放入定时器中，设定时间间隔

         timer=setInterval(task, ms);

        timer是唯一标识一个定时器实例的序号

            强调: task不能加()，因为是传递给定时器去回调执行

     3. 停止定时器:

         clearInterval(timer);

        问题: 定时器往往需要自动停止

        解决: 在*任务函数*中判断临界值

                  如果未达到临界值，继续执行任务

                  否则 停止定时器

 

    一次性定时器:  先等待，再执行一次，然后自动释放

    3件事:

     1. 任务函数task

     2. 启动定时器: 将task放入定时器中，设定等待时间

         timer=setTimeout(task, ms);

     3. 停止定时器: （其实是在执行之前，停止等待）

         clearTimeout(timer);

 

   定时器原理:

     定时器中的回调函数，必须在主程序所有语句执行完最后才能开始执行！