js（基础九）{获取元素 BOM DOM 定时器}

BOM(Browser Object Model浏览器对象模型)

BOM是JS中的一个组成部分，用于操作浏览器

BOM 可以做的事情有很多很多
获取浏览器的视口尺寸
修改浏览器的地址栏
通过BOM可以操作历史记录
可以关闭页面
可以设置定时器 延时器
可以获取浏览器的信息
……

获取浏览器的尺寸

    console.log(window.innerWidth); // 输出浏览器视口宽度
    console.log(window.innerHeight); // 输出浏览器视口高度

window对象

该对象是BOM的具体对象。所有的BOM内容都可以通过它来获取

特点：所有的window上的属性，在访问时，可以省略"window. "

window.location

是浏览器中负责浏览器的地址栏的相关对象

• href属性 用于设置和读取当前浏览器窗口的地址栏内容

    // 将当前页面的地址栏修改为百度 也就是跳转到百度
    location.href = "https://www.baidu.com";

• reload方法 用于刷新当前页面

    location.reload(); // 刷新页面

window.history

是浏览器中负责历史记录的相关对象

• forward方法 让历史记录前进一次

    history.forward(); // 前进一次

• back方法 让历史记录后退一次

    history.back(); // 后退一次

• go方法 接受一个数字作为参数
  如果为0 表示刷新当前页面
  如果为正数 表示前进几次
  如果为负数 表示后退几次

    history.go(0); // 刷新页面
    history.go(1); // 前进一步 等价于history.forward();
    history.go(2); // 前进两步 
    history.go(-1); // 后退一步 等价于history.back();
    history.go(-2); // 后退两步 

打开关闭页面

    // 打开页面
    window.open(打开的页面的网址);

    // 关闭页面
    window.close();

事件

• load事件 在资源都加载完毕之后触发

    window.onload = function() {
        // code... 这里的代码会在所有资源加载完毕之后执行
    }

• scroll事件 当页面有卷动值(页面比视口高)时，页面卷动值发生了改变时会触发

    window.onscroll = function() {
        // code... 这里的代码会在页面卷动值发生改变时触发
    }

浏览器信息

window.navigator 获取浏览器对象

• navigator.userAgent 获取浏览器代理信息字符串
• navigator.platform 获取平台信息

setInterval(重点)

• 第一个参数是函数
  • 表示要执行的代码
• 第二个参数是数字
  • 表示执行的时间间隔 单位是毫秒
• 返回值是数字 这个数字是一个编号 代表这是第几个定时器

    // 每一秒都会执行一次输出
    setInterval(function() {
        console.log(1);
    }, 1000);

今天只需要知道这是一个可以让代码按照时间循环执行的函数即可。

setTimeout(重点)

• 第一个参数是函数
  • 表示要执行的代码
• 第二个参数是数字
  • 表示延迟的时间 单位是毫秒
• 返回值是数字 这个数字是一个编号 代表这是第几个定时器

    // 1秒后输出一次 不再输出
    setTimeout(function() {
        console.log(1);
    }, 1000)

clearInterval(重点)

• 接受一个参数 就是要清除的定时器或者延时器的编号

clearTimeout(重点)

• 接受一个参数 就是要清除的定时器或者延时器的编号

注：以上两个方法可以混合使用，但不推荐。

DOM(document object model文档对象模型)

document, 该对象是window的属性。但是因为太重要，所以单独成立一个概念。
它包含着所有操作文档的方法。

获取元素

在JS中操作元素，必须要先获取到元素

• 根据ID获取元素

  • document.getElementById(id)
    该方法用于根据ID获取元素 ID是HTML标签的属性 应当具备唯一性
  • 返回值：如果有这个元素 就可以得到该元素对象。如果没有，就是null。

• 根据标签名获取元素

  • document.getElementsByTagName(tagName)
  • 返回值： 集合对象(类数组对象)

• 根据name属性获取元素

  • document.getElementsByName(name)
  • 返回值： 集合对象(类数组对象)

• 根据选择器获取元素

  • document.querySelector(selector)
  • 返回值： 元素对象

• 根据选择器获取多个元素

  • document.querySelectorAll(selector);
  • 返回值： 集合对象(类数组对象)

额外知识点

• 获取页面卷动值
  • document.documentElement.scrollTop
  • document.body.scrollTop

统一写法: var scrollTop = document.documentElement.scrollTop || document.body.scrollTop

• 获取页面高度

  • document.body.clientHeight

• 操作元素的行内样式

    // 设置行内样式
    dom.style.xxx = yyy;
    // xxx 表示对应的css样式属性名 如果用点语法，就需要使用驼峰 如果用方括号语法 则可以不用驼峰 但是一定要加双引号 
    // yyy 表示对应的属性值

    // 驼峰写法
    box.style.backgroundColor = "black";
    // 方括号写法
    box.style["background-color"] = "black";