JavaScript- BOM, DOM

Browser Object Model 浏览器对象模型, 提供与浏览器窗口进行交互的方法

它使 JavaScript 有能力与浏览器进行“对话”。 BOM 最主要的对象就是 window 对象

全局变量和全局方法都是 window 的属性和方法, 实际使用的时候书写可以忽略 " window. "

var a = 100;
console.log(a,window.a)

function foo(){ console.log(a) } foo() window.foo()

window 对象

核心的窗口对象, 随着网页打开自动创建

常用的方法

window.innerHeight     //浏览器窗口的内部高度
window.innerWidth      // 浏览器窗口的内部宽度
window.open()       // 打开新窗口 详情见下面 window.close()    // 关闭当前窗口 无参数 window.opener       // 返回对创建该窗口的 Window 对象的引用 (可读可写) window.alter()     // 警告框, 无返回值 只用于提示信息 只有确认按钮 window.prompt()    // 输入框, 带返回值的弹窗, 可输入, 提供两个按钮 确认取消
window.confirm()    // 确认框, 返回布尔值, 提供两个按钮 确认取消

open 详解

window.open(URL,name,features,replace)  

参数

  • URL: 可选,新开页面的 URL   
  • name: 可选,声明窗口名称   
  • features: 可选,制定窗口特性           

常用 replac 参数

  • height=100 窗口高度;             
  • width=400 窗口宽度;             
  • top=0 窗口距离屏幕上方的象素值;             
  • left=0 窗口距离屏幕左侧的象素值;   
  • replace  可选,布尔值,规定浏览历史搜否替换覆盖 window.opener         

ps

对一个通过 window.open 打开的窗口,通过 window.opener 调用父窗口的方法.

可直接通过 window.opener.foo({{ yangtuo }} 在子页面通过参数的将数据传递给父页面调用父页面的参数   .

从而可以实现子页面和父页面之间的数据传递.

常用属性

history

功能  保存当前窗口访问过的 URL .

属性

  length  当前窗口访问过的数量 ( 只要 URL 不同都会被记录 不是访问次数, 要注意区分 ).

方法

  back()  返回前一个 URL ( 后退按钮 ).

  forward()  前进到下一个 URL ( 前进按钮 ).

  go(n)  参数可取正负值, 值代表几个 URL , 正 - 前进, 负 - 后退 .

location

功能  保存或操作地址栏的URL

方法  

  reload( false / true )  重载页面, 设置为 false 从缓存中加载页面, 为 true 表示强制从服务器重载

定时器方法

间隔调用 ( 周期性定时器 )

每隔一段时间就执行一次代码

var timeID = setInterval(function,interval)

参数  

  function  需要执行的操作

  interval   指定时间间隔 单位 ms

返回值  返回定时器 ID 彼此区分

关闭间歇调用定时器

clearInterval(timeID)

超时调用 ( 一次性定时器 )

等待一段时间后执行一次代码

var timeID = setTimeout(function,timeout)

用法参数返回值同上

关闭超时调用计时器

clearTimeout(timeID)

定时器关闭处理

超时调用的内存占用较少.这里的关闭方法只是提供了一个关闭途径

但是间歇调用的不间断调用是会对内存造成影响因此需要考虑何时关闭

定时器实例

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function start() {
            // 开启定时器
            timer = setInterval(function () {
                var date = new Date();
                console.log(date);
            }, 1000);
            return timer
        }

        function stop() {
            clearInterval(timer)
        }
    </script>
</head>
<body>
<button onclick="start()">开始</button>
<button onclick="stop()">关闭</button>


</body>
</html>
每隔一秒打印当前时间