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

操作浏览器的一些能力
- 获取浏览器的相关信息(窗口大小)
  - 操作浏览器进行页面的跳转
  - 获取当前浏览器地址栏的信息
  - 操作浏览器的滚动条
  - 浏览器的信息(浏览器的版本)
  - 让浏览器出现一个弹出框(alert/prompt/confirm)
BOM的核心操作对象是window，也是浏览器的的内置对象

操作浏览器的方法 - 属性

获取浏览器可视窗口的宽高,包含滚动条

        console.log(`浏览器当前高度：${window.innerHeight}`);
        console.log(`浏览器当前宽度：${window.innerWidth}`);

打开浏览器提供的弹出框

        console.log(prompt("获取用户输入内容" ));
        
        // 弹出框会中断 js 程序的运行
        // console.log(1);
        // alert("hello world")
        // console.log(2);
        // alert("hello world2")
        // console.log(3);
        
        // confirm()返回值为true 或 false
        // console.log(confirm("true or false"));

浏览器的地址信息

console.log(window.location.href);      //当前网页的地址栏信息
window.location.href = 'https://www.baidu.com'  //赋值给地址栏(跳转到百度)

// window.location.reload()     //刷新浏览器，不能写在全局，否则会一直刷新

window.location.hash = '新的hash'
- 会渲染不同的页面

浏览器历史记录

        window.history.back()        //返回上一条记录 
        window.history.forward()     //返回下一条记录

浏览器的版本信息

        console.log(window.navigator);    //控制台输出版本信息

浏览器的 onload 事件

        window.onload = function () {
            console.log("浏览器加载完所有内容后执行的函数")
        }

浏览器的 onscroll 事件
- 文件头部有声明时使用documentElement，否则使用body（谷歌，火狐）
- 文件头部有声明时使用documentElement，否则都可以（IE）
- document.documentElement.scrollTop 为卷曲高度
- document.documentElement.scrollLeft 为卷曲宽度

        window.onscroll = function () {
            // console.log(document.documentElement.scrollTop);
            // console.log(document.documentElement.scrollLeft);
            // console.log(document.body.scrollTop);
            // console.log(document.body.scrollLeft);
        }

浏览器本地储存
- localStorage
  - 浏览器本地储存，持久储存，一旦储存永久存在
  - 只能存基础数据类型（一般是字符串），若存储引用数据类型需要转换成JSON格式
```
window.localStorage.setItem('arr1',JSON.stringify([1, 2, 3, 4, 5]))
window.localStorage.setItem('obj1',JSON.stringify({id:1,name:'张三'}))
console.log(JSON.parse(window.localStorage.getItem('arr1')));
console.log(JSON.parse(window.localStorage.getItem('obj1')));
```
  - 可以跨页面通讯
- sessionStorage
  - 浏览器的本地储存，临时的储存关闭浏览器以后内容自动消失
  - 想要跨页面通讯必须是本页面跳转才行
  - 存储数据类型和localStorage相同
cookie:
1. 只能存储字符串, 有固定格式
  - key=value; key2=value2; key3=value3
2. 存储大小有限制
  - 4KB左右
3. 存储有时效性
  - 默认是会话级别时效, 但是可以手动设置过期时间
4. 操作必须依赖服务器
  - 本地打开的也页面时不能操作 cookie
  - 要求页面必须在服务器打开
5. 跟随前后端请求自动携带
  - 只要 cookie 空间中有内容的时候
  - 会在该页面和后端交互的过程中自动携带
6. 前后端操作
  - 前端可以使用 JS 来操作
  - 任意一个后端语言都可以操作
7. 存储依赖域名
  - 哪一个域名存储, 那一个域名使用
  - 不能跨域名通讯

// 设置 cookie
document.cookie = 'a=100'

// 设置一条带有过期时间的 cookie
var time = new Date()
document.cookie = 'a=100;expires=' + time

// 设置一条 30s 以后过期的 cookie
var time = new Date()
time.setTime(time.getTime() - 1000 * 60 * 60 * 8 + 1000 * 30)
document.cookie = 'a=100;expires=' + time

// 获取 cookie
document.cookie

本地存储之间的区别

出现时间
- cookie：有 js 的时候就出现了
- storage：有 H5 的时候才出现
存储大小
- cookie： 4kb 左右
- storage： 4mn ~ 20mb
前后端交互
- cookie：交互时自动传递给后端
- storage：交互时不会自动传递给后端，需要手动携带
前后端操作
- cookie：前后端都能操作
- storage：只能前端语言操作
过期时间
- cookie：可以手动指定过期时间
- storage：没有过期时间

两个storage之间的区别

localS0torage
- 持久化存储，除非手动删除
- 能够跨页面通讯
sessionStorage
- 临时存储，关闭页面就会被删除
- 只能是当前窗口跳转的页面才可以通讯
两个storage的相同点
- 只能存储字符串，想要存储引用数据类型需要转换成JSON格式
- 存储布尔类型的数据获取的也是字符串

DOM(Document Object Model): 文档对象模型

基本概念及操作 ----操作html标签的能力
DOM的核心对象就是document对象，是浏览器的一个内置对象，储存操作元素的方法
DOM: 页面中的标签, 我们通过 JS 获取到以后, 就把这个对象叫做 DOM 对象
可操作的内容
- 获取一个元素
- 移除一个元素
- 创建一个元素
- 向页面中添加一个元素
- 给元素绑定一些事件
- 获取元素的属性
- 给元素添加一些 css 样式
- ......

获取常规元素

通过 js 代码来获取页面中的标签，获取后就可以操作这写标签

document.querySelector

querySelector是按照选择器的方式来获取元素，即按照写css的选择器来获取
本方法只能取到一个元素，并且是页面中第一个满足条件的元素
下列代码的结果都是获取到的元素

console.log(document.querySelector('div'))  // 获取页面中第一个 div 元素
console.log(document.querySelector('.box'))  // 获取页面中第一个 有 box 类名的元素
console.log(document.querySelector('#box'))  // 获取页面中第一个 id 名为 box 的元素

document.querySelectorAll

querySelectorAll也是按照选择器的方式获取
能获取页面所有满足条件的元素并以一个伪数组的形式返回
获取到的是一组数据, 也是需要用索引来获取到准确的每一个 DOM 元素

console.log(document.querySelectAll('div')) // 获取页面中的所有的 div 元素
console.log(document.querySelectAll('.div')) // 获取页面中的所有的 类名为 box 的元素

操作属性

我们获取到元素后, 可以直接操作 DOM的属性, 然后直接把效果展示在页面上

innerHTML

获取到元素内部的HTML结构

<div>
    <p>
        <span>hello</span>
    </p>
</div>
var div = document.querySelector('div')
console.log(div.innerHTML)    // <p><span>hello</span></p>

innerText

获取元素内部的文本（只能获取文本，获取不到html标签）

<div>
    <p>
        <span>hello</span>
    </p>
</div>
var div = document.querySelector('div')
console.log(div.innerHTML)    // hello

value

设置input输入框的提示内容（或输入内容）的方法
语法：el.value
注意：获取的值是字符串形式

设置html内部结构

<div></div>
var div = document.querySelector('div')
div.innerHTML = '<p><span>hello</span></p>'

会把<p><span>hello</span></p>当成一段文本出现在div内部，而不会将

H5自定义属性

在H5 自定义属性中 data-表示该属性是一个自定义属性，data-后面的是属性名
每个元素自带一个属性叫做 dataset，是一个类似对象的数据结构，内部记录的是该元素身上所有自定义属性
对于该元素自定义属性的操作，就是对这个数据结构的操作（对象操作语法）

<div data-a = "100" class = "box"></div>
var odiv = document.querySelector('div');
// 曾
oDiv.dataset.age = 18;
// 删
delete oDiv.dataset.a;
// 查
console.log(oDiv.dataset.a)   // 结果为 100

style

用来给元素添加 css 样式的，添加的都是行内样式

<div></div>

var div = document.querySelector('div')
div.style.width = '100px'
div.style.hright = '100px'
div.style.backgroundColor = 'pink'

获取元素样式
- 语法1：el.style.属性
- 作用：能够拿到行内样式, 或者给添加一个行内样式
- 语法2：getComputedStyle('要查询样式的标签').要查询的样式名
- 作用：能够获取到元素的样式 (行内和非行内都可以)
- 注意： 取到的内容是只读的, 只允许查询, 不允许修改
操作元素属性
- 获取元素属性：el.getAttribute('属性名')
- 设置元素属性：el.setAttribute('属性名','属性值')
- 删除元素属性：el.removeAttribute('属性名')

操作元素类名

className：
在设置的时候, 不管之前有没有类名, 都会全部被设置的值覆盖

<div class='box'></div>

var div = document.querySelector('div')
console.log(div.className)  // box
div.calssName = 'ceshi'
console.log(div.calssName)  // ceshi

classList.add
给元素添加一个类名，不覆盖原来的类名

<div class='box'></div>

var div = document.querySelector('div')
console.log(div.className)  // box
div.calssList.add = 'ceshi'
console.log(div.calssName)  // ceshi box

数据渲染

通过 js 将html标签写到页面中
优点：更加灵活，而不是写死数据

案例

js 创建html标签
- var el = document.createElement('想要创建的标签')
js 向元素中追加标签
- el(父级).appendChild(想要追加的标签)

事件冒泡

当点击了一个元素时，触发了这个元素的点击事件，按照js 的特性会将这个事件的触发也传递给自己的父级
冒泡会从点击的元素开始一直到页面的最顶层，哪怕你的元素没有绑定点击事件, 也会触发事件冒泡
捕获：从页面最顶层开始查找点击的元素，顺序与冒泡相反

点击box4，box1，2，3都会触发点击事件

    <div class="box1">
        <div class="box2">
            <div class="box3">
                <div class="box4"></div>
            </div>
        </div>
    </div>

        var box1 = document.querySelector('.box1')
        var box2 = document.querySelector('.box2')
        var box3 = document.querySelector('.box3')
        var myBody = document.querySelector('body')
        box1.onclick = function () {
            console.log('点击了蓝色盒子')
        }
        box2.onclick = function () {
            console.log('点击了粉色盒子')
        }
        myBody.onclick = function () {
            console.log('body')
        }
        box3.onclick = function () {
            console.log('点击了绿色盒子')
        }

事件委托

将所有的子元素的的事件，委托给共同的父级

        oTab.onclick = function (e) {
            // 改变数组data内的数据
            // 当点击的DOM节点的类名为 all 时，实现全选反选
            if (e.target.className === 'all') {
                for (var m = 0; m < data.length; m++) {
                    data[m].check = e.target.checked;
                }
            }
             // 当点击的DOM节点的类名为 info 时，改变对应的 check 的值
            if (e.target.className === 'info') {
                for (var k = 0; k < data.length; k++) {
                    // 当自定义的id 和 对象里的 id 相等时，改变check的值
                    if (e.target.dataset.id - 0 === data[k].id) {
                        data[k].check = !data[k].check
                    }
                }
            }
            // 重新渲染
            dataTable()
        }

获取元素偏移量

就是元素在页面上相对于参考父级的的左边和上边的距离

offsetParent

获取元素偏移量的参考父级
假设要给一个元素绝对定位的时候
它是根据谁来进行定位的，那么这个元素的偏移量参考父级就是谁

offsetLeft / offsetTop

获取的时元素左边的和上边的偏移量
- offsetLeft 该元素相对于参考父级的左侧偏移量
- fsetTop 该元素相对于参考父级的上侧偏移量

获取元素尺寸

获取元素的占位面积

offsetWidth 和 offsetHeight

offsetWidth ：获取元素内容 + padding + 边框
offsetHeight ：获取元素内容 + padding + 边框*

注意

获取到的尺寸是没有单位的数字
当元素在页面中不占位时，获取到的值是 0
- display: none在页面是不占位的
- visibility: hidden 元素在页面占位

获取浏览器窗口尺寸

document.documentElement.clientWidth获取浏览器可视窗口的宽度
document.documentElement.clientHeight获取浏览器可视窗口的高度

js --- BOM、DOM

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

操作浏览器的方法 - 属性

本地存储之间的区别

两个storage之间的区别

DOM(Document Object Model): 文档对象模型

获取常规元素

document.querySelector

document.querySelectorAll

操作属性

innerHTML

innerText

value

设置html内部结构

H5自定义属性

style

操作元素类名

数据渲染

事件冒泡

事件委托

获取元素偏移量

offsetParent

offsetLeft / offsetTop

获取元素尺寸

offsetWidth 和 offsetHeight

获取浏览器窗口尺寸